父组件更新时子组件因点击处理器props重复渲染，如何阻止？

问题核心在于：父组件每次重新渲染时，都会重新创建onHandleClick这个函数，导致传递给MemoizedSubComponent的handleClick props引用发生变化。memo做的是浅比较，它会认为props变了，所以触发子组件重新渲染。

解决方案：用useCallback缓存点击函数 #

useCallback可以帮你缓存函数的引用，只要依赖项数组里的内容不变，每次父组件渲染时都会返回同一个函数引用，这样memo就能正确识别props没有变化，避免子组件不必要的渲染。

修改后的代码如下：

import { useState, memo, useCallback } from 'react';

function SubComponent({ handleClick }) {
  console.log("component render");
  return <div onClick={handleClick}>SubComponent</div>;
}

const MemoizedSubComponent = memo(SubComponent);

export default function App() {
  console.log('app render')
  const [test, setTest] = useState(1);
  
  // 用useCallback包裹函数，空依赖数组表示这个函数永远不会重新创建
  const onHandleClick = useCallback(() => {
    console.log(1)
  }, []);
  
  const increment = ()=>{
    setTest(test+1)
  };
  
  return (
    <> 
      <button onClick={increment}>Increment {test}</button>
      <MemoizedSubComponent
          handleClick={onHandleClick}
      /> 
    </>
  );
}

验证效果 #

修改后点击Increment按钮，控制台只会输出app render，子组件的component render不会再重复出现，说明子组件没有触发不必要的渲染。

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