如何避免React叶子组件不必要重渲染？A、B、C组件场景优化问询

当然可以实现。你的现有代码其实已经基本达到效果：React默认会在组件props变化时触发重渲染，C组件接收的text props只有在B组件输入内容改变、调用updateText更新A的state时才会变化，所以C原本就只会在text变化时重渲染。

如果想在更复杂的场景下强化这个逻辑（比如后续A组件新增其他state导致重渲染，但text没变化时，避免C不必要的重渲染），可以用React.memo包裹C组件，让它对props做浅比较，只有当text确实变化时才重新渲染。

修改后的代码如下：

首先确保导入memo：

import { useState, memo } from 'react';

然后修改C组件：

const C = memo((props) => {
  return <p>{props.text}</p>;
});

A和B组件保持原有代码不变即可。

React.memo是个高阶组件，它会缓存组件的渲染结果，只有当传入的props发生浅变化时才会触发重渲染。你的场景里text是字符串类型，浅比较就能精准判断是否变化，所以用它能彻底确保C只在输入值真正改变时才重渲染。

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