React中能否按条件创建Hook？组件按需初始化变量问询

首先明确：你写的示例代码不符合React Hooks规则，不能在if这类条件语句里调用useState、useSelector、useInView这类Hooks。React要求所有Hooks必须在组件的顶层作用域调用，不能嵌套在条件、循环或函数里，否则会破坏Hooks的调用顺序，导致状态追踪混乱，引发各种难以排查的bug。

针对你的需求，有两种靠谱的解决方案：

方案一：拆分独立组件（推荐） #

把简单状态和扩展状态拆成两个独立组件，主组件根据extended props决定渲染哪个。这样每个组件的Hooks都在顶层，逻辑清晰，也符合Hooks规则：

// 简单版组件
const SimpleComponent = ({ var1 }) => {
  const [var1State, setVar1State] = useState(var1);
  // 这里写简单状态的基础功能逻辑
  return <div>简单模式内容</div>;
};

// 扩展版组件
const ExtendedComponent = ({ var1, initExtraVar }) => {
  const [var1State, setVar1State] = useState(var1);
  // 扩展状态需要的所有Hooks都在顶层调用
  const reduxState = useSelector(rootState);
  const settings = useSelector(settingsData);
  const { ref, inView } = useInView({
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.0,
  });
  const [extraVar, setExtraVar] = useState(initExtraVar);
  // 这里写扩展状态的复杂逻辑
  return <div>扩展模式内容</div>;
};

// 主控制组件
const MyComponent = ({ extended, var1, initExtraVar }) => {
  return extended 
    ? <ExtendedComponent var1={var1} initExtraVar={initExtraVar} /> 
    : <SimpleComponent var1={var1} />;
};

方案二：顶层调用Hooks+条件使用 #

如果不想拆分组件，可以把所有需要的Hooks都在组件顶层调用，再根据extended条件决定是否使用对应的变量。注意：这种方式下，即使简单状态用不到某些Hooks，它们依然会执行，所以如果有性能开销大的Hooks（比如复杂的useSelector），这种方式不推荐。另外很多Hooks支持enabled参数，可以控制是否激活：

const MyComponent = ({ extended, var1, initExtraVar }) => {
  const [var1State, setVar1State] = useState(var1);
  
  // 顶层调用所有Hooks，用条件控制返回值或激活状态
  const reduxState = extended ? useSelector(rootState) : null;
  const settings = extended ? useSelector(settingsData) : null;
  const { ref, inView } = useInView({
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.0,
    enabled: extended, // 仅在扩展状态时激活useInView
  });
  const [extraVar, setExtraVar] = useState(extended ? initExtraVar : null);

  // 后续逻辑根据extended判断使用哪些变量
  if (extended) {
    // 处理扩展状态逻辑，使用reduxState、settings等
  } else {
    // 处理简单状态逻辑
  }

  return <div>{/* 组件渲染内容 */}</div>;
};

总结：优先用拆分组件的方案，逻辑更清晰，也能避免不必要的性能开销，完全符合React的设计规范。

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