React中如何避免条件调用Hook并解决代码重复问题？

首先明确：React Hook的核心规则是必须在组件顶层无条件调用，且每次渲染的调用顺序必须完全一致，直接在if分支里调用Hook必然触发报错。以下是几种避免代码重复且符合规则的解决思路：

1. 将条件判断移到Hook内部 #

最直接的方案是修改自定义Hook，让它接收一个控制开关参数，在Hook内部判断是否执行核心逻辑。这样组件里每次都无条件调用Hook，把条件判断交给Hook内部处理，完全符合规则。

示例代码：

// 修改后的useCustomHook
export function useCustomHook(enabled) {
  useEffect(() => {
    if (!enabled) return; // 不满足条件直接返回，不执行后续逻辑
    
    // 原Hook的核心逻辑，比如埋点、状态监听等
    const trackInstance = initTracking();
    
    // 清理逻辑
    return () => {
      destroyTracking(trackInstance);
    };
  }, [enabled]); // 依赖enabled，条件变化时重新执行
}

// 改造后的Chart组件
import { useCustomHook } from './myHook';

export function Chart(props) {
  // ...原来的所有业务代码
  
  // 无条件调用Hook，把判断逻辑委托给Hook内部
  useCustomHook(props.canTrack);
  
  return <SomeComponent options={props.option} />;
}

2. 拆分组件，用组合替代继承 #

如果无法修改原Hook，可以把公共的Chart逻辑抽成基础组件，再分别封装普通版和带跟踪的版本，通过组件组合复用代码——这是React推荐的「组合优于继承」实践。

示例代码：

// 抽离公共逻辑到基础组件
function BaseChart(props) {
  // ...原来的大量业务代码
  return <SomeComponent options={props.option} />;
}

// 普通Chart组件，无需跟踪
export function Chart(props) {
  return <BaseChart {...props} />;
}

// 带跟踪的Chart组件，调用Hook
export function TrackedChart(props) {
  useCustomHook();
  return <BaseChart {...props} />;
}

使用时根据canTrack值选择对应组件：

{canTrack ? <TrackedChart {...props} /> : <Chart {...props} />}

3. 用高阶组件（HOC）封装跟踪逻辑 #

高阶组件是接收组件并返回新组件的函数，可以把跟踪逻辑封装成HOC，动态为组件添加跟踪能力，同样能避免代码重复。

示例代码：

// 封装跟踪逻辑的HOC
function withTracking(WrappedComponent) {
  return function TrackedComponent(props) {
    useCustomHook();
    return <WrappedComponent {...props} />;
  };
}

// 生成带跟踪的Chart组件
const TrackedChart = withTracking(BaseChart);

// 对外导出普通版和跟踪版
export { BaseChart as Chart, TrackedChart };

总结：优先选择第一种方案（修改Hook内部加条件），实现最简洁；若无法修改原Hook，组件组合或HOC都是合规且易维护的选择。

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