ReactJS - Рендерится ли вызывается каждый раз, когда вызывается setState?

React рендерит все компоненты и подкомпоненты каждый раз, когда setStateвызывается?

Если так, то почему? Я думал, что идея была в том, что React рендерится так мало, как нужно - когда состояние меняется.

В следующем простом примере оба класса визуализируются снова при нажатии на текст, несмотря на тот факт, что состояние не изменяется при последующих щелчках, поскольку обработчик onClick всегда устанавливает stateодинаковое значение:

this.setState({'test':'me'});

Я бы ожидал, что рендеринг будет происходить только в случае изменения stateданных.

Вот код примера, как JS Fiddle и встроенный фрагмент:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

React рендерит все компоненты и подкомпоненты каждый раз, когда вызывается setState?

По умолчанию - да.

Существует метод boolean shouldComponentUpdate (объект nextProps, объект nextState) , у каждого компонента есть этот метод, и он отвечает за определение "следует ли обновить компонент (запустить функцию рендеринга )?" каждый раз, когда вы меняете состояние или передаете новый реквизит из родительского компонента.

Вы можете написать свою собственную реализацию метода shouldComponentUpdate для своего компонента, но реализация по умолчанию всегда возвращает true - это означает, что функция рендеринга всегда перезапускается.

Цитата из официальных документов http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

По умолчанию shouldComponentUpdate всегда возвращает true, чтобы предотвратить незначительные ошибки, когда состояние изменяется на месте, но если вы будете осторожны, всегда рассматривайте состояние как неизменяемое и только для чтения из props и состояния в render (), тогда вы можете переопределить shouldComponentUpdate с помощью реализация, которая сравнивает старые реквизиты и состояние с их заменами.

Следующая часть вашего вопроса:

Если так, то почему? Я думал, что идея состояла в том, что React рендерится так мало, как нужно - когда состояние меняется.

Есть два этапа того, что мы можем назвать «рендерингом»:

1. Виртуальный рендеринг DOM: при вызове метода рендеринга возвращается новая виртуальная структура DOM компонента. Как я упоминал ранее, этот метод рендеринга вызывается всегда, когда вы вызываете setState () , потому что shouldComponentUpdate всегда возвращает true по умолчанию. Таким образом, по умолчанию, здесь нет оптимизации в React.

2. Нативная визуализация DOM: React изменяет реальные DOM-узлы в вашем браузере, только если они были изменены в Virtual DOM и настолько мало, насколько это необходимо - это та замечательная функция React, которая оптимизирует реальную мутацию DOM и делает React быстрой.

Нет, React не рендерит все, когда состояние меняется.

• Всякий раз, когда компонент загрязнен (его состояние изменилось), этот компонент и его дочерние элементы повторно отображаются. Это, в некоторой степени, заключается в повторной визуализации как можно меньше. Единственный раз, когда рендер не вызывается, это когда какая-то ветка перемещается в другой корень, где теоретически нам не нужно ничего рендерить. В вашем примере TimeInChildэто дочерний компонент Main, поэтому он также перерисовывается при изменении состояния Main.

• React не сравнивает данные о состоянии. Когда setStateвызывается, он помечает компонент как грязный (что означает, что он должен быть повторно обработан). Важно отметить, что хотя renderметод компонента вызывается, реальный DOM обновляется только в том случае, если выходные данные отличаются от текущего дерева DOM (иначе говоря, различие между деревом Virtual DOM и деревом DOM документа). В вашем примере, хотя stateданные не изменились, время последнего изменения изменилось, что сделало Virtual DOM отличным от DOM документа, поэтому HTML-код обновляется.

Хотя это указано во многих других ответах здесь, компонент должен либо:

• реализовать shouldComponentUpdateдля визуализации только при изменении состояния или свойств

• переключиться на расширение PureComponent , который уже реализует shouldComponentUpdateметод внутри для поверхностных сравнений.

Вот пример, который использует shouldComponentUpdate, который работает только для этого простого случая использования и демонстрационных целей. Когда это используется, компонент больше не перерисовывается при каждом щелчке, а отображается при первом отображении и после однократного нажатия.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Да. Он вызывает метод render () каждый раз, когда мы вызываем setState, а когда «shouldComponentUpdate» возвращает false.

Другой причиной «потерянного обновления» может быть следующая:

• Если статический getDerivedStateFromProps определен, то он перезапускается в каждом процессе обновления в соответствии с официальной документацией https://reactjs.org/docs/react-component.html#updating .
• поэтому, если это значение состояния поступает из реквизита в начале, оно перезаписывается при каждом обновлении.

Если это проблема, то вы можете избежать установки состояния во время обновления, вы должны проверить значение параметра состояния, как это

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Другое решение - добавить инициализированное свойство к состоянию и установить его в первый раз (если состояние инициализируется ненулевым значением).

Не все компоненты.

stateв компоненте выглядит как источник водопада состояние всей APP.

Таким образом, изменение происходит с того места, где вызывается setState. Тогда дерево rendersбудет вызвано оттуда. Если вы использовали чистый компонент, renderон будет пропущен.