当父组件重新渲染时，使用 react-redux 的子组件的行为如何改变？

Question

在react-redux 的 hooks 文档中，我们被警告说useSelector“即使组件的 props 没有改变，也不会阻止组件由于其父级重新渲染而重新渲染”，不像connect

这对我来说是新闻。是否connect防止在正常子组件不会重新渲染的地方重新渲染？更具体地说，我问的是当父组件重新渲染而 store 和 props 保持不变时，以下三种场景的重新渲染行为的差异：

1. 子组件包含在connectHOC 中。
2. 行为同 1.，但注入状态被重构为useSelector.
3. 作为 2.，但是useSelector依赖于它的所有东西都被删除了。

Answer 1

connect一直表现得像 React 的更复杂版本PureComponent。具体来说，当连接组件的父组件渲染时，connect如果新的“合并的 props”从之前发生变化，则只会重新渲染子组件，其中const mergeProps = { ...ownProps, ...stateProps, ...dispatchProps }.

因此，如果父组件传递与以前相同的 props，connect包装器将阻止被包装的组件重新渲染。

使用钩子，如果它的父级传递相同的道具，则没有包装器组件阻止该组件重新渲染。您需要将组件包装起来React.memo()才能实现这一点。事实上，这正是connect第 7 版中实现的方式。

（来源：我是 Redux 维护者并编写了 React-Redux v7。）