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

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

来源

2016-11-07 Tino

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

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

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

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

来源

2016-11-07 19:33:04 DDS

是的，我使用的是React-Redux和不可变的对象，并将容器（标签栏视图）组件连接到所有属性，然后我弹出一个无状态的组件，所以我应该再次将它连接到所需的属性？因为我认为只应该连接容器组件。 – Tino

即使'mapStateToProps'和'mapDispatchToProps'返回空对象（为你实现浅'shouldComponentUpdate'），你也可以连接任何东西。本质上，'connect'创建的HOC成为表示组件的容器。或者，您可以编写'shouldComponentUpdate'，或者让React对它进行排序（如果它是一个小组件，则无需担心）。 – DDS

这就是React的工作原理。如果父组件重新呈现，则其所有子组件都将重新呈现，然后React将会区分虚拟DOM输出并查看实际UI中实际需要更新的内容。即使传递给子组件的道具没有改变，这个过程也会发生。是的，shouldComponentUpdate在这里是正确的解决方案，但据我所知，它不能用于功能组件，因为它们没有生命周期方法。

如果您想防止重新渲染，您可能需要将这些功能组件转换为类组件，并且自己实现shouldComponentupdate，或者如果您使用的是React 15.3，则将它们扩展为React.PureComponent。

来源

2016-11-07 19:32:08 markerikson

如果道具不会改变，从React.PureCompont扩展的组件不会重新渲染？ – Tino

以前，React提供了一个'PureRenderMixin'来配合创建组件的'React.createClass'方法。由于这些已被弃用，他们添加了一个新的'PureComponent'基类，就好像它有一个浅的相等检查'shouldComponentUpdate'。 – markerikson

知道了，thx很多，只是将其留给其他人： '如果您确定某个特定组件在分析后很慢，则可以将其更改为从React.PureComponent继承，React.PureComponent实现了shouldComponentUpdate（），并使用浅色道具和状态比较' – Tino

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

回答

相关问题