React父组件state更新时如何仅更新指定节点避免子组件重渲染

示例代码存在两个基础问题，同时存在React默认渲染机制导致的无效重渲染：

1. 语法错误：类组件render方法返回了多个相邻JSX节点，没有用Fragment或者根标签包裹，实际运行会直接报错。
2. 内存泄漏风险：setInterval没有在组件卸载时清除，且setState直接读取闭包内的this.state.val，容易拿到过期状态值。
3. 核心重渲染原因：React类组件默认逻辑下，只要自身state更新、接收到新props，就会递归执行所有子组件的渲染逻辑，不会自动判断子组件是否依赖变化的状态，所以每次val更新触发ExampleComponent重渲染时，AnotherComponent也会跟着重新执行。

按照性能优先级从高到低可选以下方案：

方案1：状态下沉+组件拆分（最优方案） #

把频繁更新的计数状态和逻辑下沉到独立的计数器组件内部，让持有高频更新状态的组件范围尽可能小，父组件ExampleComponent本身不持有会变化的val状态，自然不会触发重渲染，也就不会连带AnotherComponent重复执行。
改造后代码如下：

// 独立计数器组件，高频更新逻辑完全封在组件内部
function Counter() {
  const [val, setVal] = React.useState(0);
  React.useEffect(() => {
    const timer = setInterval(() => setVal(prev => prev + 1), 1000);
    // 组件卸载时清除定时器
    return () => clearInterval(timer);
  }, []);
  return <p id="counter">{val}</p>;
}

function AnotherComponent() {
  console.log('AnotherComponent loading....');
  return <p>2333</p>;
}

class ExampleComponent extends React.Component {
  // 父组件无高频更新状态，首次挂载后不会因为计数变化触发重渲染
  render() {
    return (
      <>
        <AnotherComponent />
        <p>test</p>
        <Counter />
      </>
    );
  }
}

这种方案下，只有Counter组件会每秒触发重渲染，ExampleComponent和AnotherComponent仅在首次挂载时执行一次，完全没有无效渲染开销，是React官方推荐的状态管理最佳实践。提到的登录状态监听类组件，本身就适合做成完全独立、内部自行订阅状态的组件，和业务页面的高频更新状态天然隔离。

方案2：子组件加渲染缓存 #

如果因为业务逻辑限制，val状态必须放在ExampleComponent层共享给多个组件，可以给不需要随父组件更新的子组件增加浅比较逻辑，跳过无依赖变化的重渲染：

• 函数组件用React.memo包裹
• 类组件直接继承React.PureComponent
  改造后代码如下：

// React.memo默认对传入的props做浅比较，props无变化则跳过重渲染
const AnotherComponent = React.memo(function AnotherComponent() {
  console.log('AnotherComponent loading....');
  return <p>2333</p>;
});

class ExampleComponent extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.timer = setInterval(() => {
      // 用函数式更新避免闭包拿到过期state
      this.setState(prev => ({ val: prev.val + 1 }));
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer);
  }
  render() {
    return (
      <>
        <AnotherComponent />
        <p>test</p>
        <p id="counter">{this.state.val}</p>
      </>
    );
  }
}

注意：React.memo和PureComponent都是浅比较逻辑，如果给子组件传递了内联函数、字面量对象这类每次渲染都会生成新引用的prop，浅比较会判定为props变化，依然会触发重渲染。遇到这种情况可以把传递的prop固定到类实例/组件作用域外，或者给React.memo传入自定义的比较函数精准控制渲染时机。

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