使用React Hooks进行状态管理 - 无Redux和Context API

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