React Hooks中避免过时闭包回调的组件性能优化咨询

问题场景 #

长列表复选框场景：父组件维护所有项的选中状态，显示已选数量，子组件接收切换选中状态的回调，要求仅当子组件自身的checked属性变化时才重渲染，避免长列表不必要的性能开销。类组件可通过PureComponent轻松实现，但用Hooks时遇到以下问题：

• 直接用useCallback包裹回调时，因依赖items状态，每次状态更新都会生成新的回调引用，导致所有子组件触发重渲染。
• 自定义React.memo的比较函数忽略onChange会引发过时闭包问题，子组件持有的旧回调会引用旧状态。

优化技巧 #

1. 使用函数式更新消除useCallback对状态的依赖 #

利用React setState的函数式更新特性，直接通过prevState获取最新状态，无需在useCallback依赖中声明items，保证回调引用始终稳定。

优化后的父组件代码：

const ItemList = () => {
  const [items, setItems] = React.useState([
    { id: 1, text: "Item 1", checked: false },
    { id: 2, text: "Item 2", checked: false },
  ])
  
  // 用函数式更新，依赖为空数组，toggleChecked引用永久稳定
  const toggleChecked = React.useCallback((itemId) => {
    setItems(prevItems => prevItems.map(i => ({
        ...i,
        ...(i.id === itemId && {checked: !i.checked})
      }))
    )
  }, [])

  return (
    <div>
      <h2>
        Selected {items.filter(i => i.checked).length} items
      </h2>
      <ol>
      {items.map(item => (
        <Item 
          {...item}
          key={item.id} 
          onChange={toggleChecked}
        />
      ))}
      </ol>
    </div>
  )
}

const Item = React.memo(({id, text, checked, onChange}) => {
  console.log(`Rendering item ${id}`)
    return (
    <li>
      <label>
        <input 
          type="checkbox" 
          checked={checked} 
          onChange={() => onChange(id)}
        /> 
        <span>{text}</span>
      </label>
    </li>
  )
})

此时toggleChecked的引用不会随items变化而改变，React.memo的浅比较会正确判断：只有checked属性变化的子组件才会重渲染，其他子组件因props未变而跳过渲染。

2. 使用useReducer管理状态（复杂场景推荐） #

当状态更新逻辑复杂或需要多个回调时，用useReducer替代useState，dispatch函数的引用是稳定的，子组件接收dispatch后，React.memo可直接生效。

示例代码：

// 定义reducer
const itemReducer = (state, action) => {
  switch(action.type) {
    case 'TOGGLE_CHECKED':
      return state.map(i => ({
        ...i,
        checked: i.id === action.payload ? !i.checked : i.checked
      }))
    default:
      return state
  }
}

const ItemList = () => {
  const [items, dispatch] = React.useReducer(itemReducer, [
    { id: 1, text: "Item 1", checked: false },
    { id: 2, text: "Item 2", checked: false },
  ])
  
  // dispatch引用稳定，无需依赖
  const toggleChecked = React.useCallback((itemId) => {
    dispatch({type: 'TOGGLE_CHECKED', payload: itemId})
  }, [dispatch])

  return (
    <div>
      <h2>
        Selected {items.filter(i => i.checked).length} items
      </h2>
      <ol>
      {items.map(item => (
        <Item 
          {...item}
          key={item.id} 
          onChange={toggleChecked}
        />
      ))}
      </ol>
    </div>
  )
}

const Item = React.memo(({id, text, checked, onChange}) => {
  console.log(`Rendering item ${id}`)
    return (
    <li>
      <label>
        <input 
          type="checkbox" 
          checked={checked} 
          onChange={() => onChange(id)}
        /> 
        <span>{text}</span>
      </label>
    </li>
  )
})

dispatch的引用在组件生命周期内保持不变，因此toggleChecked的引用也稳定，彻底避免了因回调变化导致的子组件重渲染。

3. 组件拆分（可选） #

将列表项的渲染逻辑拆分为独立的无状态组件，父组件仅负责状态管理和统计展示，进一步隔离渲染范围，确保父组件重渲染时不会影响未变化的子组件。

核心原理 #

• 稳定回调引用：通过函数式更新或useReducer保证回调函数的引用不随状态变化而改变，让React.memo的浅比较能正确生效。
• 避免过时闭包：函数式更新和useReducer都通过React内部机制获取最新状态，不会出现闭包引用旧状态的问题。

内容的提问来源于stack exchange，提问作者alex-k