Сколько раз рендер будет фактически выполняться в компоненте React

Question

Я проходил через методы React LifeCycle, когда наткнулся на это:

Я запутался, когда вижу функцию render () для запустить 2 раза. Все, что я знаю, это то, что любая функция в React Life-Cycle запускается только один раз. Итак, почему я вижу 2 функции рендеринга здесь (или работает 2 раза). Не повлияет ли это на память и чрезмерное использование для запуска во второй раз.

Кроме того, Как мы знаем, где будет работать функция рендеринга (или на какой стадии), как она может выполняться в 2 местах в React Cycle . Кинлди, помогите уточнить.

Ссылка:

https://gist.github.com/bvaughn/923dffb2cd9504ee440791fade8db5f9

Answer 1

Mounting

Сначала Reactjs будет отображать метод только один раз, а жизненный цикл будет:

constructor();
static getDerivedStateFromProps()
render();
componentDidMount();

Обновление

Но при обновлении component state or on receiving new props запустит следующий жизненный цикл:

static getDerivedStateFromProps()
shouldComponentUpdate();
render();
getSnapshotBeforeUpdate();
componentDidUpdate();

не то, возвращение false из shouldComponentUpdate() не вызовет рендеринг

Все методы, кроме render() опционально

Answer 2

Для компонента функция render(), очевидно, может запускаться более одного раза для одного и того же монтирования. Вы можете обратиться к этой таблице из документов React.

Из таблицы ясно, что если компонент смонтирован, только constructor и componentDidMount будут запускаться один раз (исключая componentWillUnmount, который также запускается один раз, когда компонент отключен), а другой жизненный цикл методы могут запускаться неограниченное количество раз, зависит от количества обновлений этого компонента.

Answer 3

Краткий ответ: всякий раз, когда изменяется значение состояния или реквизита, ваш метод рендеринга будет работать до тех пор, пока вы не принудительно остановитесь, вернув false из метода жизненного цикла, как упоминалось в @Navin Gelot, тогда он не будет запускать рендер. в противном случае да.