React：如何让子组件仅在指定Props更新时重新渲染

当前你的代码中，只要Parent组件的状态（不管是num还是someState）更新，都会触发Parent重新渲染，进而导致Child组件跟着重新渲染。要实现Child仅在num更新时才重新渲染，可通过以下方法处理：

核心方案：使用React.memo包裹Child组件 #

React.memo是React提供的高阶组件，它会对组件的props进行浅比较，当props未发生变化时，会跳过组件的重新渲染，直接复用之前的渲染结果。具体修改如下：

import { useState, memo } from 'react';

function Parent(){
  const [num, setNum] = useState(0)
  const [someState, setSomeState] = useState({})
  return <div>
      <Child num={num}/>
    </div>
}

// 用memo包裹Child组件，实现props不变时跳过重渲染
const Child = memo(function Child({num}) {
  return <div>{num}</div>
});

原理说明 #

• 因为num是基本类型，React.memo的浅比较会直接对比值是否相等。当Parent仅更新someState时，Child接收的numprops没有变化，因此Child不会重新渲染。
• 如果后续需要给Child传递引用类型的props（比如对象、数组），浅比较可能会因引用地址变化误判为props更新，此时可以给memo传入第二个参数，自定义比较逻辑：

  const Child = memo(function Child({data}) {
    return <div>{data.value}</div>
  }, (prevProps, nextProps) => {
    // 返回true表示props未变化，不需要重新渲染
    return prevProps.data.value === nextProps.data.value;
  });
  

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