反应备忘录
使用 memo
如果组件的 props 没有改变,则会导致 React 跳过渲染该组件。
这可以提高性能。
本节使用 React Hooks。请参阅 React Hooks 部分以获取有关 Hooks 的更多信息。
问题
在此示例中, 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);
现在 Todos
组件仅在以下情况下重新渲染:todos
通过 props 传递给它的内容会被更新。