React повторно отображает все компоненты и подкомпоненты при каждом вызове setState() ?

Если да, то почему? Я думал, идея заключалась в том, что React отображал ровно столько, сколько было необходимо — при изменении состояния.

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

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

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

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

 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>  

React повторно отображает все компоненты и подкомпоненты при каждом вызове setState?

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

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

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

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

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

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

Если да, то почему? Я думал, идея заключалась в том, чтобы React отображал ровно столько, сколько необходимо — при изменении состояния.

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

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

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

Нет, React не отображает все при изменении состояния.

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

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

ДА. Он вызывает render() метод каждый раз, когда мы вызываем setState только, за исключением случаев, когда shouldComponentUpdate возвращается false .

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

• реализовать 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>  

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

https://codesandbox.io/s/still-wave-wouk2?file=/src/App.js

React 18 и выше

Начиная с React 18, все обновления состояния отправляются автоматически пакетно. Таким образом, React группирует несколько обновлений состояния в один повторный рендеринг для повышения производительности.

Поэтому, когда вы обновляете свое состояние, React всегда пытается выполнить пакетные обновления в групповом обновлении, вызывая меньше рендеринг чем setState вызовов. Поведение такое же при использовании перехватов.

Вы можете прочитать очень длинное объяснение в автоматической дозации для отреагировать 18 объявлении.

Реагируйте 17 и ниже

В React 17 и ниже пакетами обрабатываются только обновления внутри обработчиков событий React. Обновления, запускаемые из promises, setTimeout, собственных обработчиков событий или других событий, по умолчанию не пакетируются в React.

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

• Если определен статический 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 и настроить его в первый раз (если состояние инициализировано ненулевым значением).)

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

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

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

Независимо от хорошо объясненных ответов здесь, могут быть другие причины, по которым вы не видите ожидаемого изменения после изменения реквизита или состояния:

Обратите внимание на любое event.preventDefault(); место в коде, где вы хотите выполнить повторный рендеринг с помощью изменения состояния реквизита, поскольку это отменит любое событие, которое можно отменить после этого утверждения.

Вы могли бы использовать setState () только после сравнения текущего значения состояния и нового, и они отличаются.