React什么时候重新渲染子组件？

Question

我知道当状态或道具发生更改时（或当我们强制组件进行重新渲染时），React将执行重新渲染。我也知道React在重新渲染时会重新渲染组件的子代。

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

那是为什么？ React是否会重新渲染完全无状态和无状态的子组件？

Answer 1

默认情况下，为什么React这么做是因为它不知道在状态相同时不重新渲染，除非您使用诸如reselect之类的包对这些组件进行存储。

重新选择可以帮助您完成操作，仅在传递的状态与当前状态不同时才重新渲染组件。

Answer 2

如果不希望子组件重新渲染，则应使用React.memo，PureComponent或shouldComponentUpdate生命周期挂钩。

这三个选项中的每一个都告诉React，如果您的组件（属性）的输入未更改，则由于组件不会更改，因此没有必要重新渲染组件。

如果使用类组件，则

PureComponent或shouldComponentUpdate应该是您的首选。本质上，PureComponent只是为您实现了shouldComponentUpdate。

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

在使用React组件时，您应该绝对使用这三个选项之一来重选。 Reselect用于在redux中记住选择器（或仅用于常规函数调用）。这并不是要记住反应组件。

我通常使用reselect使组件的道具稳定（使用connect时），并防止在每个渲染器上重新计算复杂数据。