阅读 963

使用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

关注下面的标签,发现更多相似文章
评论