React函数组件优化：如何避免400+Node组件不必要重渲染？

你的问题核心在于点击回调函数的引用变化导致React.memo失效，同时状态更新依赖旧值的矛盾。下面是具体的解决步骤：

1. 使用函数式更新获取最新状态，配合useCallback稳定函数引用 #

在Parent组件中，将setClickedList的更新改为函数式更新，这样不需要在useCallback的依赖数组中加入clickedList，就能获取到最新的状态值，同时保证回调函数的引用始终稳定：

const Parent = (props) => { 
  const [clickedList, setClickedList] = useState([]); 
  // 使用useCallback，依赖数组为空，函数引用稳定
  const onNodeClick = useCallback((node) => { 
    // 函数式更新，prevList是最新的状态值
    setClickedList(prevList => [...prevList, node]); 
  }, []); // 依赖为空，onNodeClick引用不会变化

  return ( 
    <div> 
      {/* 修正：这里应该传递组件内部定义的onNodeClick，而非props.onNodeClick */}
      {someNodes.map(node => <Node key={node.id} node={node} onNodeClick={onNodeClick}/>)} 
    </div> 
  ) 
}

2. 给Node组件添加React.memo #

现在onNodeClick的引用稳定了，只要node属性没有变化，React.memo就能阻止Node组件的不必要重渲染：

// 用React.memo包裹Node组件，浅比较props变化
const Node = React.memo((props) => { 
  return ( 
    {/* 修正：这里的node应为props.node */}
    <div onClick={() => props.onNodeClick(props.node)}> 
      {props.node.name} 
    </div> 
  ) 
});

为什么这样可行？ #

• 函数式更新：setClickedList(prevList => ...)会自动接收最新的状态值prevList，不需要依赖外部的clickedList变量，彻底避免了闭包捕获旧值的问题。
• 稳定的回调引用：useCallback的依赖数组为空，onNodeClick的引用在组件生命周期内不会改变，因此Node组件的props只有当node本身数据变化时才会更新，配合React.memo就能跳过无意义的重渲染。
• Parent重渲染不影响Node：Parent组件因状态更新必然会重渲染，但每个Node组件只会在自身node属性变化时才重渲染，其余400+组件都会被React.memo拦截。

另外，你之前尝试自定义memo比较函数忽略回调的做法是错误的——这会导致Node组件无法获取到最新的回调函数，进而无法正确更新Parent的状态。正确的思路是稳定回调引用，而非忽略它的变化。

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