Почему компонент без гражданства перерисовывается, когда реквизит не меняется?

Question

Я использую приложение для Android, используя реакцию-native и redux. Мой контейнерный компонент часто обновляется, но реквизит, который я передаю дочернему компоненту без гражданства, не меняется, но он все еще повторно отображается. Как я могу предотвратить эту повторную визуализацию? Я знаю, что могу использовать shouldComponentUpdate, но тогда мне нужно проверить там все свойства.

Answer 1

Именно поэтому React не делает этого для вас. Он должен будет проверить все свойства и их детей (и потомков). Это может быть много работы.

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

Без React-Redux вам необходимо реализовать shouldComponentUpdate, но если вы используете неизменяемые данные, вы можете реализовать общую функцию, чтобы выполнить мелкое сравнение и использовать ее во всех ваших компонентах. Если вы не используете неизменяемые данные повсюду, вам нужно либо использовать глубокое сравнение, либо оптимизировать, реализовать shouldComponentUpdate по отдельности для конкретных проверок.

Это большая причина, по которой используется React-Redux.

Answer 2

Вот как работает Реакт. Если родительский компонент повторно отображает, все его дочерние элементы будут повторно отображены, а затем React будет различать виртуальный вывод DOM и посмотреть, что на самом деле нужно обновить в реальном интерфейсе. Этот процесс происходит, даже если реквизит, передаваемый дочернему компоненту, не изменился. И да, shouldComponentUpdate - правильное решение здесь, но это не может быть использовано с функциональными компонентами, насколько я знаю, поскольку они не имеют методов жизненного цикла.

Если вы хотите предотвратить повторный рендеринг, вам, вероятно, придется преобразовать эти функциональные компоненты в компоненты класса и либо реализовать shouldComponentupdate самостоятельно, либо продлить их до React.PureComponent, если вы используете React 15.3.