备忘录

阅读2239

更新时间2025-08-20

Router

CSS 样式

使用 memo 会导致 React 跳过渲染组件，如果它的 props 没有改变。

这可以提高性能。

本节使用 React Hooks。有关 Hooks 的更多信息，请参阅 React 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 (
    <>
      
      
      
        Count: {count}
        
      
    
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Todos.js:

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      My Todos
      {todos.map((todo, index) => {
        return {todo};
      })}
    
  );
};

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 (
    <>
      
      
      
        Count: {count}
        
      
    
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();

Todos.js:

import { memo } from "react";

const Todos = ({ todos }) => {
  console.log("child render");
  return (
    <>
      My Todos
      {todos.map((todo, index) => {
        return {todo};
      })}
    
  );
};

export default memo(Todos);

运行实例 »

现在 Todos 组件仅在通过 props 传递给它的 todos 时重新渲染更新了。

Router

CSS 样式

RELATED VIDEOS