Реакция: повторная отрисовка при установке состояния - Hooks против this.setState - PullRequest
Новая
       9

Реакция: повторная отрисовка при установке состояния - Hooks против this.setState

6 голосов
/ 27 марта 2019

Компоненты класса

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

Документы (ссылка на API setState) :

setState () всегда будет приводить к повторному рендерингу, если shouldComponentUpdate () не возвращает false.

Хуки (Компоненты функций)

Однако с помощью перехватчиков в документах указывается, что при обновлении состояния до значения, идентичного предыдущему состоянию, не вызывает повторный рендеринг (дочерних компонентов):

Документы (справочник по useState API) :

Выход из состояния обновления

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

Тесно связанные вопросы

  1. Верно ли, что this.setState в классекомпоненты всегда вызывают повторную визуализацию, даже если новое значение state идентично предыдущему?
  2. Правильно ли, что в функциональных компонентах с перехватчиками setState из useState вызывает повторную визуализацию, только если значение state отличается от предыдущего значения?
  3. Устанавливает state с this.setState внутри метода render компонента класса , так же, как установка state внутри тела функции функционального компонента с крючками ?
  4. Правильно ли следующее?
    • В компоненте класса , если мы установим state в методе render, произойдет бесконечный цикл.Это связано с тем, что компонент класса не заботится о том, чтобы новый state был таким же, как предыдущий state.Он просто продолжает повторный рендеринг для каждого this.setState.
    • В компоненте функции с перехватами , однако, установка state внутри тела функции (который выполняется при повторном рендеринге аналогичноrender метод в компонентах класса ) будет не проблемой, потому что функциональный компонент просто вылетает из повторного рендеринга, когда видит, что state идентичен предыдущему state.

1 Ответ

6 голосов
/ 27 марта 2019

Правильно ли, что this.setState в компонентах класса всегда вызывает повторную визуализацию, даже если новое значение состояния идентично предыдущему?

Если задано допустимое значениекроме возврата нулевого значения в setState, повторный рендеринг всегда будет запускаться по реакции в компоненте класса, если только ваш компонент не является PureComponent или вы не внедрили shouldComponentUpdate

Правильно ли, что в компонентах функций с хукамиsetState from useState вызывает повторную визуализацию только в том случае, если значение состояния отличается от предыдущего значения?

Для функционального компонента, использующего хук useState, сеттер при вызове с тем же состоянием не сработаетперерисовать.Однако для случайного случая, если установщик вызывается немедленно, это приводит к двум рендерам вместо одного

Устанавливает состояние с помощью this.setState внутри метода рендеринга компонента класса, так же, как и состояние установкивнутри тела функции компонента функции с хуками?

Технически да, установка состояния непосредственно в методе рендеринга вызовет функцию повторного рендеринга в случае, когда компонент класса вызовет бесконечный цикл, которыйслучай для функциональных компонентов при условии, что значения состояния различны.Независимо от этого, это все равно будет вызывать проблему, потому что любое другое обновление состояния будет возвращено обратно из-за непосредственного обновления состояния функционального компонента

В компоненте класса, если мы устанавливаем состояние в методе рендерингабесконечный цикл произойдет.Это связано с тем, что компоненту класса не важно, что новое состояние совпадает с предыдущим состоянием.Он просто продолжает повторную визуализацию для каждого this.setState.

Да, поэтому рекомендуется не вызывать setState напрямую при рендеринге

В компоненте функции с перехватчиками, однако,установка состояния внутри тела функции (которая выполняется при повторном рендеринге аналогично методу рендеринга в компонентах класса) не будет проблемой, потому что компонент функции просто выходит из повторного рендеринга, когда видит, что состояние идентично предыдущемусостояние.

Не на 100% верно, поскольку вы можете инициировать обновление состояния, используя предыдущее значение, так что предыдущее и текущее значение не совпадают. Например, 

setCount(count => count + 1);

В таком случаеВ этом случае ваш компонент все равно попадет в бесконечный цикл

...