hook函数放在函数组件的顶层

Hook函数是React 16.8版本引入的一种新的特性，它允许你在函数组件中直接访问状态管理、生命周期方法以及一些React的核心API，而无需编写传统的class组件。将hook函数放在函数组件的顶层是为了遵循“单职责原则”，通常你会看到像`useState`、`useEffect`、`useContext`这样的hook被放置在组件顶部，如下所示：

import React, { useState } from 'react';

function MyFunctionComponent() {
  // 使用useState钩子声明并初始化状态
  const [count, setCount] = useState(0);

  // 其他组件逻辑...

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

通过这种方式，hook函数使得状态管理和副作用操作更直观地融入到组件内部，提高了代码的可读性和维护性。