为什么不将 useState Hook 放在 If 语句中？

Question

直观上，这对我来说是有道理的，但我正在寻找有关 React 编译方式的深入解释，这会导致类似这样的副作用。

const Header = () => {
   const [counter, setCounter] = useState(0);
   if(counter > 3) {
      const [subtext, setSubtext] = useState("Secret message unlocked.");
   }
   const [headertext, setHeadertext] = useState("Hello World!");
   
   const click = () => {
      setCounter(counter + 1);
   }

   return {
      <div>
         <h1>{headertext}</h1>
         <h2>{subtext}<h2>
         <button onClick={click}>Click Me!</button>
      </div>
   }
}

Answer 1

是因为react对待hooks的方式。所有钩子都有一个将状态和引用与正确组件相关联的顺序。如果有条件地或在循环内调用钩子，则钩子调用的顺序可能会在重新渲染之间发生变化，从而破坏内部 React 逻辑来处理状态。

例如，在你的代码中，你有 3 个钩子，其中一个位于 if 语句内，如果该语句不正确，那么你将有 2 个钩子，但 React 会尝试查找 3 个钩子，然后就会中断。