React更新列表部分项时如何避免所有项发生不必要的重渲染

首先解决你提到的useCallback闭包陷阱问题：出现旧值是因为updateInputs内直接引用了外部的inputs状态，只要通过setState函数式更新或者ref同步最新状态的方式规避对外部inputs的依赖，就可以正常用useCallback固定updateInputs的引用，再配合memo即可阻断不必要的重渲染。

方案1：useCallback配合setState函数式更新（最推荐，最轻量） #

核心原理是setState传入函数作为参数时，拿到的prev参数永远是最新的状态值，不需要依赖外部的状态变量，因此useCallback的依赖数组可以留空，保证updateInputs只生成一次。

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

// 输入组件用memo包裹，浅比较props判断是否重渲染
const InputComponent = memo((props) => {
  // 原有输入组件逻辑
})

const Form = (form)=>{  
  const [inputs, setInputs] = useState(form.inputs)
  const updateInputs = useCallback((updates)=>{
    setInputs(prevInputs => {
      const newInputs = [...prevInputs]
      // 你的更新逻辑：匹配对应id的输入项做修改
      const targetIndex = newInputs.findIndex(item => item.id === updates.id)
      if (targetIndex > -1) {
        newInputs[targetIndex] = {...newInputs[targetIndex], ...updates}
        // 关联输入的启用/禁用逻辑可以在这里处理，基于最新的prevInputs派生
      }
      return newInputs
    })
  }, []) // 依赖数组为空，函数仅初始化时生成一次

  return inputs.map(input=>
    <InputComponent {...input} key={input.id} onChange={updateInputs} />
  )
}

改完后只有被修改的输入项、以及被关联逻辑修改了属性（比如disabled状态）的输入项会触发重渲染，其余项不会更新。

方案2：useRef同步最新状态（适合更新逻辑极复杂的场景） #

如果你的关联输入计算逻辑非常复杂，在setState的函数参数里写起来不方便，可以用useRef存储最新的inputs状态，每次状态更新时同步到ref，updateInputs内从ref读取最新值即可，同样不需要依赖外部inputs。

import { useState, useCallback, useRef, useEffect, memo } from 'react'

const InputComponent = memo((props) => {
  // 原有输入组件逻辑
})

const Form = (form)=>{  
  const [inputs, setInputs] = useState(form.inputs)
  // 用ref同步最新的inputs状态
  const inputsRef = useRef(inputs)
  useEffect(() => {
    inputsRef.current = inputs
  }, [inputs])

  const updateInputs = useCallback((updates)=>{
    // 从ref读取永远是最新的状态值
    const latestInputs = inputsRef.current
    const newInputs = [...latestInputs]
    // 你的复杂更新、关联逻辑可以在这里写
    setInputs(newInputs)
  }, [])

  return inputs.map(input=>
    <InputComponent {...input} key={input.id} onChange={updateInputs} />
  )
}

方案3：状态切片订阅（适合超大型表单场景） #

如果你的表单项超过100项，或者关联逻辑非常多，可以把表单状态抽离到外部状态管理库（比如Zustand、Redux），每个InputComponent只订阅自己对应id的状态切片，只有对应切片变化时才会触发重渲染，不需要手动处理memo和依赖问题。

注意事项 #

• React.memo默认是浅比较props，如果你的input配置项里包含引用类型的自定义属性，需要保证这些属性的引用稳定，或者给memo传入自定义的比较函数。

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