每个父状态更改都会调用React功能组件

Question

我是React的新手，我找到了令我困惑的事情。

几乎每个教程都建议使用功能（无状态）组件。 但是最近我发现，如果功能组件是一个子组件，每当父组件状态或道具发生变化时它就会被渲染，即使我没有传递任何道具。 基于类的组件不会发生这种情况。 这种情况的原因是什么？

我是否应该只使用基于类的组件才能获得最高性能？

Answer 1

以下是开箱即用的选项：

1. 像你一样使用纯函数：

   • [+]易于编写和理解
   • [ - ]每次父组件重新渲染时都会重新渲染（如果您不通过任何道具，可能不会出现问题）

2. 使用类组件并实现shouldComponentUpdate

   • [+]你可以完全控制重新渲染的条件。
   • [ - ]需要更多代码才能编写

3. 使用PureComponent

   • [+]自动使用浅的shouldComponentUpdate，因此编写的代码更少
   • [ - ]可能会产生不良副作用（对于复杂对象和非纯子组件无法正确渲染的假阴性）

在您的特定情况下，由于您没有将任何道具传递给您的子组件，因此使用纯函数是完全可以接受的。因为这意味着它只是纯粹的静态HTML，并且每次都会重新渲染，即使它是父母的一部分。

最后，对于更高级的用途，请查看https://github.com/acdlite/recompose