共计 1952 个字符，预计需要花费 5 分钟才能阅读完成。
React Hooks 比你想象的更强大。
现在，我们将探索和开发一个自定义 Hook 来管理全局状态 – 比 Redux 更容易使用的方法，并且比 Context API 更高效。
Hooks 基础
如果你已经很熟悉 React Hooks，那么可以直接跳过这部分。
useState()
在 Hooks 之前，功能组件没有状态。现在，使用 useState()，我们可以让功能组件拥有状态。
useState()会返回一个数组 。上面数组的 第一项 是一个可以访问状态值的变量。第二项 是一个能够更新组件状态，而且影响 dom 变化的函数。
useEffect()
类似 Component 组件，使用生命周期方法来管理副作用，例如 componentDidMount()。useEffect() 函数允许您在 函数组件 中执行副作用。
默认情况下，useEffect 在每次完成渲染后运行。但是，您可以选择仅在某些值发生更改时触发它，并将一个数组作为第二个可选参数传递。
要获得与 componentDidMount() 相同的结果，我们可以发送一个空数组。空数组不会改变，useEffect 只会运行一次。
共享 states
我们可以看到 Hooks 状态与类组件状态完全相同。组件的每个实例都有自己的状态。
为了组件之间共享状态，我们将创建一个自定义 Hook。
这个想法是创建一个监听器数组，只有一个状态对象。每当一个组件更改状态时，所有订阅的组件都会触发其 setState() 函数并进行更新。
我们可以通过调用自定义Hook 中的 useState() 来实现。我们将 setState() 函数添加到一个监听器数组，并返回一个函数用来更新 state 和 运行所有监听器函数。
现在已经有了 use-global-hook 这个 npm 包，您可以通过包文档中的示例了解如何使用它。但是，从现在开始，我们将专注于它是怎么实现的。
第一个版本
在组件中使用它：
第一个版本已经可以共享状态。您可以在应用程序中添加任意数量的 Counter 组件，它们都具有相同的全局状态。
但我们可以做得更好
我想在第一个版本中改进的内容：
- 我想在卸载组件时从数组中删除监听器。
- 我想让它更通用，可以在其他项目中使用。
- 我想通过参数设置 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
