React Memo
使用 memo 将导致 React 跳过渲染组件，如果其 props 没有改变。
这可以提高性能。
本节使用 React Hooks。有关 Hooks 的更多信息，请参阅 React Hooks 部分。
问题
在此示例中，即使 todos 没有更改，Todos 组件也会重新渲染。
示例
index.js:
import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Todos.js:
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default Todos;
单击递增按钮时，Todos 组件会重新渲染。
如果此组件很复杂，则可能会导致性能问题。
解决方案
要解决此问题，我们可以使用 memo。
使用 memo 防止 Todos 组件不必要地重新渲染。
将 Todos 组件导出包装在 memo 中
示例
index.js:
import { useState } from "react";
import ReactDOM from "react-dom/client";
import Todos from "./Todos";
const App = () => {
const [count, setCount] = useState(0);
const [todos, setTodos] = useState(["todo 1", "todo 2"]);
const increment = () => {
setCount((c) => c + 1);
};
return (
<>
<Todos todos={todos} />
<hr />
<div>
Count: {count}
<button onClick={increment}>+</button>
</div>
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Todos.js:
import { memo } from "react";
const Todos = ({ todos }) => {
console.log("child render");
return (
<>
<h2>My Todos</h2>
{todos.map((todo, index) => {
return <p key={index}>{todo}</p>;
})}
</>
);
};
export default memo(Todos);
现在，只有当传递给它的 props 中的 todos 更新时，Todos 组件才会重新渲染。
