React.memo() 与 React 功能组件

Question

我在我的应用程序中使用了很多 React 功能组件。 现在是考虑用 React 的新React.memo() API 替换我的功能组件的合适时机吗？ 它真的会提高性能吗？ 如果我每次都使用React.memo()而不是功能组件，React 必须检查我的新 props 和以前的 props 是否相同，然后需要更新我的组件。 会不会给 React 带来负担并降低我的性能？

有什么建议 ？

Answer 1

您不必替换您的功能组件，因为备忘录是您环绕现有组件的高阶组件。 它将提高性能，因为如果它们的 props 没有改变，您将不再需要对功能组件进行任何不必要的重新渲染。 来自 React 文档（ https://reactjs.org/docs/react-api.html#reactmemo ）：

如果您的函数组件在给定相同的 props 的情况下呈现相同的结果，您可以将其包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。 这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

您不必担心“替换”您的组件，您可以像这样包装导出功能

export default React.memo(YourComponent);