为什么无状态组件在道具不变时重新渲染？

Question

我正在使用react-native和redux实现android应用程序。我的容器组件经常更新，但我传递给子无状态组件的道具没有改变，但它仍然一直在重新渲染。如何防止重新渲染？我知道我可以使用shouldComponentUpdate，但我需要检查所有属性。

Answer 1

这就是React的工作方式。如果父组件重新渲染，它的所有子组件将重新渲染，然后React将区分虚拟DOM输出并查看实际UI中实际需要更新的内容。即使传递给子组件的props没有更改，也会发生此过程。是的，shouldComponentUpdate是正确的解决方案，但据我所知，它不能与功能组件一起使用，因为它们没有生命周期方法。

如果您想阻止重新呈现，您可能需要将这些功能组件转换为类组件，并自行实现shouldComponentupdate，或者如果您正在使用它们，请延长React.PureComponent反应15.3。

Answer 2

这正是React不会为你做这件事的原因。它需要检查所有属性及其子（和后代）。这可能是很多工作。

如果您使用React-Redux，只需将connect组件提供给它需要的任何数据，它就不应该重新渲染，因为Redux对您的数据做出了不同的假设。特别是，它假定您在任何地方使用不可变对象，这意味着它不必检查子项（或后代）。

如果没有React-Redux，您将需要实现shouldComponentUpdate，但是如果您使用不可变数据，则可以实现一个通用函数来进行浅层比较并在所有组件中使用它。如果您不在任何地方使用不可变数据，则需要使用深度比较，或者在逐个组件的基础上优化实施shouldComponentUpdate以进行特定检查。

这是使用React-Redux的一个重要原因。