React / Memo：用 React.memo 包装所有功能组件答案

【问题标题】：React / Memo: Wrapping all the functional components with React.memoReact / Memo：用 React.memo 包装所有功能组件
【发布时间】：2019-11-09 17:26:45
【问题描述】：

感谢 React 钩子，我们开始将所有组件开发为功能组件。但是我们错过了避免不必要的重新渲染的 PureComponent。我们曾经创建每个扩展 PureComponent 的组件。

我的问题是：我们是否应该盲目地用 React.memo 包装我们所有的功能组件？它会以任何方式减慢或影响应用程序吗？有没有什么情况我们不应该用 React.memo 包装功能组件？

【问题讨论】：

请标记答案

标签： reactjs

【解决方案1】：

是的，类的 React.memo、PureComponent 和 shouldComponentUpdate 都会产生负面的性能影响，因为它们的计算成本很小，所以如果你知道你的组件不是纯组件，你应该注意如何以及何时使用他们。

【讨论】：

我想知道在 pure-components 的情况下，是否应该总是用 React.memo 包装作为经验法则或性能优势不值得
选择不使用 react memo 的一些原因可能是： - 您确定组件的重新渲染率较低 - 您的组件很小（UI 元素非常少） - 您的组件通常提供重新渲染期间的不同道具（在这种情况下，道具比较只是额外的成本）@vsync
我的意思是 pure，因为它根本没有 props，总是返回完全相同的输出并且重新渲染率未知，因为该组件可以在任何地方使用（例如 - 特定的单元素工具提示）
我认为这样的组件非常少见，大多数组件至少都有某种道具。无论如何，我还要说这些组件应该包含在 react.memo 中，因为它们没有理由重新渲染，如果他们的父母重新渲染，它们会。 @vsync

【解决方案2】：

以下链接回答了我的问题。

https://dmitripavlutin.com/use-react-memo-wisely/

https://github.com/facebook/react/issues/14463

【讨论】：