当子组件的父组件重新渲染时,使用`react-redux`的子组件的行为如何变化?

时间:2019-09-07 12:31:45

标签: reactjs redux react-redux react-hooks

react-redux's hooks documentation,我们警告useSelector“即使组件的属性没有变化,也不会阻止组件由于其父对象的重新渲染而重新渲染”,与{{1 }}

对我来说这是新闻。 connect是否在正常子组件不会重新渲染的地方阻止重新渲染?更具体地说,我要问的是以下三种场景在父组件重新渲染而商店和道具保持不变的情况下的三种渲染方式的差异:

  1. 子组件包装在connect HOC中。
  2. 行为为1.,但注入状态被重构为connect
  3. 与2.一样,但是useSelector及其相关的所有内容都将被删除。

1 个答案:

答案 0 :(得分:3)

connect始终像React的PureComponent的更复杂版本一样。具体来说,当渲染连接的组件的父组件时,connect仅在新的“合并的道具”已从之前的const mergeProps = { ...ownProps, ...stateProps, ...dispatchProps }更改时重新渲染子组件。

因此,如果父组件正在传递与以前相同的道具,则connect包装器将阻止重新渲染被包装的组件。

使用钩子时,没有包装器组件阻止该组件在其父对象传递相同的props时重新呈现。您需要将组件包装在React.memo()中才能实现。而且,实际上,这就是connect本身在版本7中的实现方式。

(来源:我是Redux维护者,编写了React-Redux v7。)