Redux: Как работают частичные перерисовки?

Question

Этот вопрос касается внутренних компонентов для частичного повторного рендеринга с помощью React-Redux.

Чтобы объяснить, что я имею в виду, я сначала введу очень грубую технику для управления состоянием без какой-либо библиотеки управления состоянием. В этом методе используется огромный объект AppState, который принадлежит компоненту App верхнего уровня. Предположим, что этот AppState содержит не только свойства состояния, но и несколько обратных вызовов, которые изменяют эти свойства состояния. Кроме того, предположим, что мы используем реквизиты для передачи этого AppState по всей иерархии компонентов. Благодаря распространенному синтаксису ES6 прохождение огромного количества реквизитов может быть выполнено без большого количества стандартного кода. В компоненте приложения верхнего уровня это будет выглядеть так:

<ChildComponent {...this.state} />

Во всех остальных компонентах это будет выглядеть так:

<GrandChildComponent {...this.props} />

Важно отметить, что синтаксис распространения ES6 фактически не передает объект AppState. Вместо этого он извлекает все свойства AppState и передает их как отдельные объекты.

Теперь мы должны различать guish между свойствами верхнего уровня и вложенными дочерними свойствами AppState:

• Если я изменю свойство верхнего уровня этого AppState, вызвав setState, тогда все приложение будет перерисовано (если я не использую такие вещи, как чистые компоненты).
• Однако, если я изменю вложенный child-свойство этого AppState, тогда ничего не произойдет, потому что React не замечает изменения свойства.

Это приводит к моим последним вопросам:

• Какова производительность рендеринга этого грубого подхода по сравнению с Redux?
• Как именно Redux обрабатывает «частичные визуализации», так что только некоторые Компоненты повторно визуализируют после изменения состояния?

Answer 1

Если я изменю свойство верхнего уровня этого AppState, вызвав setState, тогда все приложение будет перерисовано (поскольку все зависит от AppState).

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

Однако если я изменю вложенное дочернее свойство этого AppState, то ничего не произойдет, потому что React не обратите внимание на изменение свойства.

Это верно только в том случае, если вы мутировали, а компоненты чистые.

Какова производительность рендеринга этого грубого подхода по сравнению с Redux?

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

Как именно Redux обрабатывает «частичные визуализации», так что только некоторые из компонентов повторно визуализируют после изменения состояния?

React-redux useSelector или connect mapStateToProps всегда вызывается каждый раз, когда диспетчер изменяет состояние и перед рендерингом.

Если результат отличается от последнего результата, реакция-избыточность вызовет рендеринг компонента. Если компонент получает реквизиты, то рендеринг также может быть запущен, потому что реквизиты меняются и выполняется maptate / selector.

Подключенный компонент будет наблюдать состояние и визуализировать, когда результат mapState или селектора изменился. Пример приложения с журналами, показывающими, что будет работать response-redux, можно найти здесь

Answer 2

Для управления состоянием вам не обязательно использовать Redux, если ваши варианты использования невелики, возможно, React Hook подойдет для вас.

Что касается вопросов рендеринга React, я знаю, что есть несколько стратегий (useMemo, PureComponents), предоставленных React для управления и повышения производительности. Это действительно зависит от того, как вы управляете вашими компонентами.

Один из примеров - использование PureComponent , даже если в приложении верхнего уровня имеется большое состояние. js, если вы управляете Дочерние компоненты должным образом не будут повторно отображаться, если их принимающие реквизиты не изменились.