React Hooks代码大量使用useCallback、useEffect，是否有更优的代码组织方式？

首先纠正一个常见的使用误区：不是所有内联函数都需要用useCallback包裹。只有当函数作为属性传递给使用React.memo优化的自定义子组件时，才需要通过useCallback稳定函数引用避免子组件不必要重渲染。如果是绑定给<button>、<select>这类原生DOM元素，内联函数的创建开销可以忽略不计，完全可以直接在JSX里写内联逻辑，这一步就能减少大部分不必要的useCallback声明。

以下是几种可落地的代码组织方案：

• 按业务逻辑聚合，抽离自定义Hook
  把同一业务域相关的状态、useEffect、处理函数封装到独立的自定义Hook中，只对外暴露组件需要用到的状态和方法。比如表单操作可以抽成useFormLogic、数据查询可以抽成useDataFetch，组件内部只需要调用自定义Hook拿到返回值即可，不会出现一堆零散的Hooks和函数声明堆积的情况。
• 使用useReducer替代零散的状态更新逻辑
  如果组件内部有大量关联的状态操作，可以把所有更新逻辑收敛到reducer函数中，组件内只需要调用引用稳定的dispatch触发操作即可，不需要为每个操作单独声明useCallback包裹的处理函数，同时也能把复杂的状态更新逻辑和组件视图层解耦。
• 合并相关的useEffect
  只要依赖项重合、逻辑属于同一业务域，就可以把多个拆分的useEffect合并为一个，不用为了逻辑拆分强行拆成多个独立的useEffect，减少冗余代码。
• 把复杂业务逻辑下沉到状态管理层
  如果组件业务逻辑过重，可以把业务逻辑放到状态管理库中统一维护，组件只负责消费状态和触发动作，进一步精简组件内部的代码量。

优化后代码示例 #

// 独立的自定义Hook：维护和当前组件相关的所有业务逻辑
const useMyCompLogic = (prop1, prop2) => {
  const [listData, setListData] = useState([])

  // 合并相关的副作用逻辑
  useEffect(() => {
    // 原prop1相关的副作用
    if (prop1) {
      loadListData(prop1).then(res => setListData(res))
    }
    // 原prop1 + prop2相关的副作用
    if (prop1 && prop2) {
      updatePageTitle(prop1, prop2)
    }
  }, [prop1, prop2])

  // 只有需要传给memo子组件的函数才用useCallback包裹
  const handleBtn1Click = useCallback(() => {
    // 按钮1点击逻辑
  }, [prop1])

  const handleSelectChange = useCallback((value) => {
    // 下拉框选择逻辑
  }, [listData])

  return {
    listData,
    handleBtn1Click,
    handleSelectChange
  }
}

// 组件层只负责渲染视图，逻辑非常清爽
const MyFuncComp = ({ prop1, prop2 }) => {
  const { listData, handleBtn1Click, handleSelectChange } = useMyCompLogic(prop1, prop2)

  return (
    <div>
      {/* 原生元素的点击逻辑可以直接写内联，不需要useCallback */}
      <button onClick={() => window.open('/help')}>帮助</button>
      <button onClick={handleBtn1Click}>操作按钮</button>
      <select onChange={handleSelectChange}>
        {listData.map(item => <option key={item.id} value={item.value}>{item.label}</option>)}
      </select>
    </div>
  )
}

另外补充一个优化原则：不要提前过度优化，useCallback、React.memo本身也有执行开销，只有通过性能工具确认确实存在重渲染导致的性能问题时，再做对应的引用稳定优化即可，大部分中小复杂度的组件不需要添加大量的useCallback声明。

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