使用"react-redux"的子组件的行为在其父组件重新渲染时如何变化?

Question

在 react-redux 的钩子文档中，我们被警告说useSelector"不会阻止组件由于其父重新渲染而重新渲染，即使组件的 props 没有改变"，这与connect

这对我来说是新闻。connect是否会阻止在普通子组件不会重新呈现的情况下重新呈现？更具体地说，我问的是以下三种场景的重新渲染行为的差异，当父组件重新渲染而商店和道具保持不变时：

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

Answer 1

connect一直表现得像是 ReactPureComponent的更复杂的版本。 具体来说，当连接的组件的父组件渲染时，connect只会在新的"合并道具"与之前相比发生变化时重新渲染子组件，其中const mergeProps = { ...ownProps, ...stateProps, ...dispatchProps }。

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

使用钩子，如果该组件的父组件传递相同的 props，则没有包装器组件阻止该组件重新渲染。 您需要将组件包装在React.memo()中才能实现此目的。 事实上，这正是版本 7 中实现connect本身的方式。

(来源：我是一名 Redux 维护者，写了 React-Redux v7。