传递相同Props时如何避免React组件重复执行？

你用memo没达到预期，是因为memo管的是同一个组件实例的重渲染，不是多个独立实例的初始渲染。你在App里写了三个<Todo text="Learn React"/>，这是三个完全独立的组件实例，每个实例都会执行一次Todo组件的函数，这属于正常的初始渲染，memo管不着。

如果你的需求是让Todo组件的逻辑只执行一次，同时显示三个相同的内容，可以用useMemo缓存渲染好的Todo元素，然后重复使用：

修改App组件代码：

import { useMemo } from 'react';
import Todo from "./components/Todo";

function App() {
  // 缓存Todo元素，依赖为空数组只会创建一次
  const repeatedTodo = useMemo(() => <Todo text="Learn React"/>, []);
  
  return (
    <div>
      <h1>My Todos</h1>
      {repeatedTodo}
      {repeatedTodo}
      {repeatedTodo}
    </div>
  );
}

export default App;

如果你的需求只是要显示一个Todo组件，直接删掉另外两个<Todo/>就行，这是最简单的方式。

补充说明：memo的正确用法是——当父组件重渲染但子组件props没变化时，阻止子组件跟着重渲染。比如App里有state变化，三个Todo的props不变，这时候memo会让它们不重复执行渲染逻辑，但初始渲染的三个独立实例还是会各执行一次。

内容的提问来源于stack exchange，提问作者rajgopalbh4