如何用useCallback包裹updateParentState回调实现组件memo化

注意：不要在map循环内部调用useCallback，React Hook 必须在组件顶层调用，在循环/条件分支里调用会直接违反Hook规则，引发报错。

你遇到的问题本质是内联回调每次渲染都会生成新引用，导致子组件的memo浅比较失效，有两种常用实现方案：

方案1：透传索引（最推荐，缓存效果最好） #

只在组件顶层声明一次稳定的回调函数，把索引通过props传给子组件，由子组件触发回调时把索引和参数一起回传，保证所有列表项拿到的都是同一个函数引用。

父组件代码修改： #

// 组件顶层声明回调，依赖只有updateFeedbacks，引用全程稳定
const handleFeedbackUpdate = useCallback((index, feedback) => {
  updateFeedbacks(index, feedback)
}, [updateFeedbacks])

// 列表渲染部分
items.map((item, index) => (
  <ItemReturnFeedback
    // 不要用index当key，优先用item自带的唯一ID，避免列表顺序变动时状态错乱
    key={item.id}
    anchorText={additionalFeedbackText}
    index={index}
    updateParentState={handleFeedbackUpdate}
    defaultText={feedbacks[index]}
  />
))

子组件ItemReturnFeedback对应修改： #

子组件触发回调时，把自身拿到的index和反馈内容一起传回父组件即可，不需要改动其他逻辑：

// 子组件内部原来触发updateParentState的位置
// 比如输入框变更、提交操作时
const triggerUpdate = (newFeedback) => {
  // 新增透传index参数
  updateParentState(index, newFeedback)
}

这种写法下，只要updateFeedbacks引用不变，传给所有列表项的handleFeedbackUpdate引用始终不变，子组件的memo缓存可以完全生效。

方案2：预生成回调数组（不修改子组件时使用） #

如果你暂时不想改动子组件的传参逻辑，可以用useMemo提前生成所有项的回调数组，缺点是当items或者updateFeedbacks变动时，所有回调都会重新生成，缓存效果弱于方案1：

// 组件顶层预生成所有项的回调
const feedbackUpdateCallbacks = useMemo(() => {
  return items.map((_, index) => (feedback) => {
    updateFeedbacks(index, feedback)
  })
}, [items, updateFeedbacks])

// 列表渲染时直接取对应索引的回调
items.map((item, index) => (
  <ItemReturnFeedback
    key={item.id}
    anchorText={additionalFeedbackText}
    updateParentState={feedbackUpdateCallbacks[index]}
    defaultText={feedbacks[index]}
  />
))

注意：如果你的updateFeedbacks是在父组件内部声明的函数，记得也给它包上useCallback，否则它本身的引用变化会导致外层回调的缓存失效。

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