避免在传递相同的 props 时执行组件

Question

我正在描述一个简单的场景，我希望 Todo 组件仅执行一次，因为传递了相同的 prop。我已经使用了备忘录钩子，但它没有解决问题。

import Todo from "./components/Todo";


function App() {
    return (<div>

        <h1>My Todos</h1>
        <Todo text="Learn React"/>
        <Todo text="Learn React"/>
        <Todo text="Learn React"/>
    </div>);
}

export default App;


import {memo} from "react";

const Todo= memo(function Todo({text}){
    return (
        <div className="card">
            <h2>{text}</h2>
        </div>
    );
})

 export default Todo;

Answer 1

React 将每个

Todo

组件视为唯一实例，因为它们是单独的 JSX 元素。即使 props 相同，每个实例也是独立渲染的，所以

React.memo

不会优化这个场景。

您可以通过创建单个实例并重用它来避免多次渲染组件。

import Todo from "./components/Todo";

function App() {
    const todoElement = <Todo text="Learn React" />; // Create a single instance of Todo

    return (
        <div>
            <h1>My Todos</h1>
            {todoElement}
            {todoElement}
            {todoElement}
        </div>
    );
}

export default App;

• 您可以有效地将

  React.memo

  与按键结合使用，因为 React 使用按键来跟踪更改并确定重新渲染。
• 动态列表示例：

  const todos = ["Learn React", "Learn React", "Learn React"];
  
  return (
      <div>
          <h1>My Todos</h1>
          {todos.map((text, index) => (
              <Todo key={index} text={text} />
          ))}
      </div>
  );