React函数组件中状态依赖型重复代码的优化方案探讨

标准设计模式：自定义Hook + 外部纯UI组件 #

这是当前函数组件场景下的最优解，完美解决你遇到的两个核心问题：

• 自定义Hook：将重复的状态依赖逻辑（如状态读写、事件处理、衍生计算）提取到Hook中，Hook可直接访问父组件的状态与上下文，无需通过props传递大量依赖项。
• 外部纯UI组件：把50行的重复UI代码抽成独立的外部组件，该组件仅接收Hook返回的处理结果与必要的UI配置props，配合React.memo可避免不必要的重渲染。

示例代码：

// 提取重复逻辑到自定义Hook
function useRepeatedLogic(sharedState) {
  const handleClick = React.useCallback(() => {
    // 依赖sharedState的业务处理逻辑
  }, [sharedState]);
  
  const computedValue = React.useMemo(() => {
    // 基于sharedState的衍生计算逻辑
  }, [sharedState]);
  
  return { handleClick, computedValue };
}

// 外部纯UI组件，用memo缓存避免无意义重渲染
const RepeatedBlock = React.memo(({ handleClick, computedValue, label }) => {
  // 50行的重复UI结构代码
  return (
    <div className="block-container" onClick={handleClick}>
      <span className="block-label">{label}</span>
      <span className="block-value">{computedValue}</span>
    </div>
  );
});

// 父组件
function ComponentMajor() {
  const [sharedState, setSharedState] = React.useState(0);
  const blockLogic = useRepeatedLogic(sharedState);
  
  return (
    <div className="major-container">
      {Array.from({ length: 10 }).map((_, index) => (
        <RepeatedBlock 
          key={index}
          label={`区块 ${index + 1}`}
          {...blockLogic}
        />
      ))}
    </div>
  );
}

类组件是否更适合此场景？ #

答案是否定的。类组件处理这类场景通常依赖渲染属性（Render Props）或高阶组件（HOC），但这两种方案的代码复杂度远高于函数组件+Hook的组合，还会增加组件嵌套层级，提升调试难度。函数组件的Hook机制天生适合提取状态依赖逻辑，是当前React官方推荐的方案。

memoize子组件未成功的常见原因及解决 #

你之前尝试memoize内部子组件失败，大概率是两个原因：

• 传递给子组件的函数、对象等引用类型props，在父组件每次渲染时都会重新创建，导致React.memo的浅比较判定props变化，触发重渲染。
• 内部声明组件会导致父组件每次渲染都生成新的组件类型，React会卸载旧组件并挂载新组件，必然引发状态丢失、重复生命周期等异常行为。

解决办法：

1. 将子组件移到父组件外部，避免每次渲染创建新组件类型。
2. 用useCallback缓存传递给子组件的函数，useMemo缓存传递的对象，确保引用稳定。

能否用JavaScript apply传递作用域给组件实例？ #

不建议这么做。React的核心设计原则是单向数据流，组件的状态与依赖应通过props或上下文（Context）传递。直接通过apply修改组件作用域会绕过React的状态管理机制，导致组件行为不可预测，调试和维护难度急剧上升，同时违反React的设计规范，后续版本可能出现兼容性问题。

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