前言

react因其难理解、组件结构冗余一直被定义为大型应用框架，对此也一直react官方一直在改进，推出了无状态组件也称 函数式组件 ，让我们抛弃不用在写麻烦的class、render。但是我们日常开发中大部分组件都跟业务关联，拥有自己的状态，函数式组件因其无状态一直没有进到我们视野中。直到 React16.8 横空出世，让我在函数组件中用钩子也可以使用state、生命周期，使我们应用更加灵活和简洁，react hook也许可以在未来某一天完全替代class的写法，让我一起期待吧！

正文

首先官方已经明确指出hook是完全向后兼容的，对项目不会造成的任何破坏性，我们完全不必对之前的class组件进行整改，完全是可选的，我们可以开始尝试在新的组件中。并且在关于redux等生态也出了hook的api，所以放下所以的疑虑，也忘掉以前class组件的写法，我们开始吧。

hook译为钩子，简明的说就是在组件中把状态、生命周期引进来。首先我们先了解一下具体有

哪些钩子。

useState

useState方法返回state当前的值和一个改变state的方法

useState参数为state的初始值

如果初始值需要计算，也可以传一个回调

useEffect

useEffect一个接受接收副作用代码的函数，例如获取数据、设置定时器等。

如我们想在num更新后修改网页title

他会在组件挂载、组件更新后执行，如之前生命周期 componentDidMount 和componentDidUpdate 结合版。

• 限制

同时如果我们不想每次更新都执行，我们可以在第二参数中传一个数组，指定哪些状态更新时触发，如果传一个空数组，就只有在挂载时触发。

• 清除

我们项目中可以会遇到组件卸载清除上一次的订阅或者定时器

useEffect 返回一个清除函数 在执行下一个 effect 之前，上一个 effect 就已被清除。

useContext

Context提供了组件之间传递数据的方法 解决了props一层层传递 与redux解决相同的痛点

首先创建Context

const Context = React.createContext();

使用 context.Provider 为所有子孙代提供 value 值

在子组件中调用useContext，传入我们之前React.createContext创建的对象

这样我们可以获取到父组件传过来的数据了 父组件更新时子组件也会重新渲染。

useReducer

useState的另一种写法，目的用一定的规则修改state，使得代码更清晰方便测试，如果state状态逻辑复杂还是非常值得去用的。

与useState类似，useReducer返回state以及修改修改state的方法

useReducer & useContext 结合替代redux

在上文useContext的基础上，我们将useReducer返回的state、dispatch放在value中，这样子组件就可以访问以及修改state,这样我们完全达到了redux的效果。

总结

也是用的不是非常久有一些钩子的理解可能不是非常深入，用没有写出来，如果有疑惑的可以一起探讨一下。

详细请参考官方文档 react.docschina.org/docs/hooks-…