React Hooks比你想象的更强大。
现在，我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法，并且比Context API更高效。
Hooks基础
如果你已经很熟悉React Hooks，那么可以直接跳过这部分。
useState()
在Hooks之前，功能组件没有状态。现在，使用useState()，我们可以让功能组件拥有状态。
useEffect()
类似Component组件，使用生命周期方法来管理副作用，例如componentDidMount()。useEffect() 函数允许您在函数组件中执行副作用。
默认情况下，useEffect在每次完成渲染后运行。但是，您可以选择仅在某些值发生更改时触发它，并将一个数组作为第二个可选参数传递。
要获得与 componentDidMount() 相同的结果，我们可以发送一个空数组。空数组不会改变，useEffect只会运行一次。
共享states
我们可以看到Hooks状态与类组件状态完全相同。组件的每个实例都有自己的状态。
为了组件之间共享状态，我们将创建一个自定义Hook。
我们可以通过调用自定义Hook中的 useState() 来实现。我们将 setState() 函数添加到一个监听器数组，并返回一个函数用来更新state 和 运行所有监听器函数。
现在已经有了 use-global-hook 这个npm包，您可以通过包文档中的示例了解如何使用它。但是，从现在开始，我们将专注于它是怎么实现的。
第一个版本
但我们可以做得更好
我想在第一个版本中改进的内容：
-
我想在卸载组件时从数组中删除监听器。
-
我想让它更通用，可以在其他项目中使用。
-
我想通过参数设置 initialState。
-
我想使用更多函数式编程。
在组件卸载之前调用一个函数
我们了解到，使用空数组调用 useEffect(function，[]）与componentDidMount() 具有相同的用途。但是，如果第一个参数中使用的函数返回另一个函数，则第二个函数将在卸载组件之前触发。完全像 componentWillUnmount()。
这是从监听器数组中删除组件的理想位置。
第二个版本
除了最后的修改，我们还将：
-
将React设置为参数，不再导入它。
-
不导出 customHook，而是导出根据 initialState 参数返回新 customHook()。
-
创建一个包含state和 setState() 函数的store对象。
-
替换 setState() 和 useCustom() 的上下文为store。
因为我们现在有一个更通用的Hook，我们必须在store文件中设置它。
将actions与组件分开
如果您曾经使用过复杂的状态管理库，那么您就知道直接在组件中操作全局状态并不是最好的做法。
最好的方法是，通过创建操作状态的action来分离业务逻辑。出于这个原因，我希望我们的解决方案的最后一个版本中，组件不能访问setState()去操作状态，而是通过actions。
为了解决这个问题，我们的 useGlobalHook(React，initialState，actions) 函数将接收一个action对象作为第三个参数。关于这一点，我想补充一些东西：
Actions将有权访问store对象。因此，action可以使用 store.state 读取状态，通过store.setState() 写入状态，甚至使用 state.actions 调用其他操作。
对于组织，actions对象可以包含其他actions的子对象。因此，您可能调用 actions.addToCounter(amount) ，**或者一个action子对象， 调用actions.counter.add(amount) **。
最终版本
以下是NPM包use-global-hook中的内容。
最后，一个实战案例
src/styles.css
src/index.js
src/store/index.js
src/components/Counters.js
src/components/Repos.js
src/components/SearchForm.js
src/actions/counter.js
src/actions/github.js
src/actions/index.js
package.json
