React：自定义Hook实现

自定义Hook函数介绍

概念：自定义Hook是以use打头的函数。通过自定义Hook函数，可以用来实现逻辑的封装和复用。

封装自定义hook函数的通用思路：
1）声明一个以use打头的函数。
2) 在函数体内封装可复用的逻辑（只要是可复用的逻辑都可以放过来）。
3）把组件中用的状态或者回调函数return出去（以数组、或者对象都行）。
4) 在哪个组件中要使用这个逻辑，就执行这个自定义hook函数，解构出来状态和回调函数使用。

示例

方式：不使用Hook函数封装，直接实现

点击toggle按钮以后：

再次点击toggle按钮以后：

代码：

方式：用自定义hook函数封装实现

点击toggle按钮：

再点击toggle 按钮：

代码：