React 何时重新渲染子组件？

Question

我知道当状态或属性改变时（或者当我们强制组件重新渲染时），React 会执行重新渲染。我还知道 React 在重新渲染时会重新渲染组件的子组件。

我注意到 React 会重新渲染子组件，即使它的 props（子 props）没有改变，所以当父组件传递与之前相同的 props 时。

这是为什么？React 是否会重新渲染完全无状态且无属性的子组件？

Answer 1

如果您希望子组件不重新渲染，您应该使用React.memo、PureComponent或ShouldComponentUpdate生命周期钩子。

这三个选项中的每一个都告诉 React，如果组件（props）的输入没有改变，那么重新渲染组件就没有意义，因为组件不会改变。

如果您正在使用类组件，PureComponent 或 shouldComponentUpdate 应该是您的首选。本质上，PureComponent 只是为您实现了 shouldComponentUpdate。

使用函数组件时，React.memo 应该是你的首选。React.memo 有一个函数的第二个参数来确定相等性，其作用与 shouldComponentUpdate 类似。

在使用 React 组件时，您绝对应该使用这三个选项之一而不是重新选择。Reselect旨在记住 redux 中的选择器（或只是一般函数调用）。它并不是为了记忆反应组件。

我通常使用重新选择来使组件的道具稳定（在使用连接时）并防止在每次渲染时重新计算复杂的数据。