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