与无状态组件反应备忘录

Question

在React引入memo和hook之前，所有功能组件都是无状态的。

在介绍了memo和hook之后，我对这两个概念很困惑。

React.memo是否仅用于使用钩子的功能？？

是否应该将我的所有无状态功能组件更新到React.memo进行优化？还是在功能不自动使用挂钩时做出反应来优化它？

Answer 1

要了解React.memo的用途，首先必须了解React.Component和React.PureComponent之间的区别。

从文档中-

  

它们之间的区别是React.Component没有实现   shouldComponentUpdate（），但是React.PureComponent用一个   浅层支撑和状态比较。

     

如果您的React组件的render（）函数呈现相同的结果   给定相同的道具和状态，您可以将React.PureComponent用于   在某些情况下可以提高性能。

React.memo与React.PureComponent相同，只是功能组件相同。因此，如果您认为使用给定的道具，您的组件将呈现相同的效果，则可以用React.memo包装组件，以提高性能并记住结果in the docs。

但是要特别看一下文档中的那行-

  

此方法仅作为性能优化存在。不要依靠   它可以“防止”渲染，因为这可能会导致错误。

并且您应该决定使用React.memo，而不考虑hooks。