看了这个，还怕面试官问你react hook？

前言

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-…