在开发前需要思考：这个功能的哪些逻辑可以抽出成为独立的 Hooks。
Hooks 核心优点：
- 方便进行逻辑复用
- 帮助关注分离
自定义 Hooks
方法：声明一个名字以 use 开头的函数，且在函数内使用到了其他 Hooks，如果没有使用到其他 Hooks 那它就是一个普通函数。
一方面可以实现逻辑复用，另一方便可以使代码更加语义化。
三个典型的业务场景
封装通用逻辑：useAsync
发起异步请求获取数据并显示在界面上，data，loading，error 三个状态逻辑可以作为通用逻辑。
可以自己写一下
优点：在 Hooks 中可以管理当前组件的 state，从而使更多的逻辑写在可重用的 Hooks 内，而普通的工具类是无法修改组件 state 地，那么就无法在数据改变时触发组件的重新渲染。
监听浏览器状态：useScroll
如：界面需要根据窗口大小变化重新布局 / 页面滚动时根据滚动位置显示「返回顶部」的按钮。
可以让 React 的组件绑定在任何可能的数据源上，这样当数据源发生变化时，组件能够重新渲染。
拆分复杂组件
目的：保持每个函数的短小不一定是为了逻辑复用，仅仅为了业务逻辑的隔离。
尽量将相关的逻辑做成独立的 Hook，然后在函数组件中使用这个 Hooks，通过参数的传递和返回值让 Hooks 之间完成交互。
PS：所以此类 Hooks 可以和函数组件写在一个文件内。
可以仔细研究一下这里的例子代码
总结
四个使用场景
- 抽取业务逻辑
- 封装通用逻辑
- 监听浏览器状态
- 拆分复杂组件
思考
将 useCounter 转换为更灵活的自定义增加或减少数字，如何实现？
const useCounter = () => {
const [count, setCount] = React.useState(0);
const increment = useCallback((step) => setCount(count + step), [count]);
return { count, increment };
};
