memo实例_mem0实战-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45799289/article/details/129933655

示例展示了如何使用React的memo高阶组件来包裹函数组件，以避免在props未变时不必要的重渲染。当count改变时，Counter组件才重新渲染，提高应用性能。这种方法适用于大型或计算密集型组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面是一个使用 memo 的示例：

import React, { memo, useState } from "react";

const Counter = memo(function Counter({ count }) {
  console.log("Render Counter");

  return <h1>Counter: {count}</h1>;
});

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <Counter count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

在这个示例中，我们首先定义了一个名为 Counter 的函数组件，并使用 memo 高阶组件来包装它。该组件接收一个名为 count 的prop，并在页面上展示计数器的值。由于我们使用了 memo，所以只有在 count 改变时，该组件才会重新渲染。

接下来，在 Example 组件中，我们创建了一个计数器和一个按钮，并将 setCount 函数作为按钮的点击事件处理程序。每次点击按钮时，计数器的值都会增加，并且 Counter 组件也会被重新渲染。

总之，memo 可以帮助我们避免不必要的渲染，从而提高React组件的性能。如果您有一个非常大或非常深的组件树，或者一个组件需要进行昂贵的计算或I/O操作，那么使用 memo 可以帮助您提高应用程序的响应性和性能。