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

React Hooks比你想象的更强大。

现在，我们将探索和开发一个自定义Hook来管理全局状态 - 比Redux更容易使用的方法，并且比Context API更高效。

Hooks基础

如果你已经很熟悉React Hooks，那么可以直接跳过这部分。

useState()

在Hooks之前，功能组件没有状态。现在，使用useState()，我们可以让功能组件拥有状态。

useState()会返回一个数组。上面数组的第一项是一个可以访问状态值的变量。第二项是一个能够更新组件状态，而且影响dom变化的函数。

useEffect()

类似Component组件，使用生命周期方法来管理副作用，例如componentDidMount()。useEffect() 函数允许您在函数组件中执行副作用。

默认情况下，useEffect在每次完成渲染后运行。但是，您可以选择仅在某些值发生更改时触发它，并将一个数组作为第二个可选参数传递。