React 使用 Hook,只能在函数组件的顶层调用 Hooks

原文

 

如果在循环、条件或嵌套函数中调用 Hooks，就可能会破坏这个顺序，导致 React 无法正确地将状态、更新函数或副作用与组件的特定渲染关联起来。这可能会导致诸如无限循环、丢失状态或无法更新的副作用等问题。

以下是一个例子，展示了在条件语句中调用 Hooks 可能会导致的问题（尽管这样做在 React 中是不允许的，但为了解释目的，我会假设它能够运行）

import React, { useState, useEffect } from 'react';  
  
const MyComponent = ({ shouldShow }) => {  
  if (shouldShow) {  
    // 错误：在条件语句中调用 Hooks  
    const [count, setCount] = useState(0);  
  
    useEffect(() => {  
      console.log('Component mounted or updated');  
    });  
  
    return (  
      <div>  
        <p>You clicked {count} times</p>  
        <button onClick={() => setCount(count + 1)}>Click me</button>  
      </div>  
    );  
  }  
  
  // 如果 shouldShow 为 false，则 count 和 setCount 不会被定义  
  // 这将导致在 shouldShow 变为 true 时状态丢失或不一致  
  
  return null;  
};  
  
export default MyComponent;

在上面的例子中，如果 shouldShow 从 false 变为 true，count 和 setCount 将被重新初始化，因为它们是在条件语句中声明的。这将导致之前的状态丢失，因为 React 不知道在之前的渲染中 count 的值是多少。

此外，useEffect Hook 也会遇到问题，因为它同样是在条件语句中调用的。React 依赖于每次渲染时 Hooks 的调用顺序，但在条件语句中，useEffect 可能不会在每次渲染时都被调用，这可能导致副作用没有按预期执行。

为了避免这些问题，React 强制要求只能在函数组件的顶层调用 Hooks。如果你需要在条件语句或循环中使用状态或副作用，你应该将这部分逻辑提取到一个新的组件中，并在该组件内部使用 Hooks。这样，每个组件都会在其自己的范围内正确地调用 Hooks。