Hook在if else里也没问题，不信就进来瞅一眼

前端

2023-12-20 12:55:36

不少人认为React Hook只能用在函数组件的最外层，其实这并不是真的。这篇短文不但会举一个简单的例子，也会讲清楚为什么这样做是可以的。

Hook定义回顾

在Hooks被引入之前，我们必须依靠类组件，才能在函数组件中实现状态管理。但是，这很不方便，因为类组件的写法既繁琐，还不够直观。

因此，Hooks就横空出世了，它使得函数组件可以拥有和类组件类似的功能。而Hook的本质，其实就是一个函数，它可以接收一些参数，并返回一些值。

Hook的使用场景

从表面上看，Hook的使用场景非常有限。因为React明确指出，Hook只能用在函数组件的最外层。也就是说，我们不能把Hook放在if else里面，也不能把它放在循环里面。

然而，实际上，Hook的使用场景远比我们想象的要广阔。因为，我们可以通过一些技巧，来变通地使用Hook。

Hook放在if else里的例子

下面是一个简单的例子，演示了如何将Hook放在if else里面。

const MyComponent = () => {
  const [count, setCount] = useState(0);

  if (count > 0) {
    // 这里使用了useEffect Hook
    useEffect(() => {
      console.log('count is greater than 0');
    }, [count]);
  }

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
      <div>count: {count}</div>
    </div>
  );
};