React解密：React Hooks详情初次探索

随着React 16.8+ 版本的发布，react也迎来了重大的变革，其中react hooks更是react新版本的一大革命性的变化，也是被众多开发者所青睐。那么react hooks 到底是何方神圣，我们来揭开react hooks的神秘面纱。

react hooks是什么？

在react中,凡是use-开头的react api都是hooks函数。当前比较火热的函数式编程就是react的推崇的，react提倡写函数式组件。但是函数式组件不能使用生命周期函数，没有属于自己的state,这又不得不使得开发者转向class组件。所以react 16.8+版本，开始提出了hooks的概念，来解决这一问题。

react hooks解决了什么问题？

我们说hooks的出现是react革命性的一次创新。那么hooks仅仅是让函数组件有了state这么简单吗？显然不是，他还做了很多很多，我们来说说react hooks都解决了些什么问题。

1、函数组件有了state: 我们知道，16.8-版本的react函数组件不能有state，那么16.8+版本react函数因为hooks的出现，可以有自己的state.可以使用useState()方法，为自己创建state。

2、this一去不复返：我们知道react类组件，我们常干的一件事儿就是在构造函数中绑定this，这是个让人头疼的事儿，但是hooks的出现，让我们不再关心this的指向的问题。

3、状态逻辑的复用不再是难事：在组件之间复用状态逻辑很难，可能要用到 render props （渲染属性）或者 HOC（高阶组件），但无论是渲染属性，还是高阶组件，都会在原先的组件外包裹一层父容器（一般都是 div 元素），导致层级冗余，hooks的出现将迎刃而解。

4、趋向复杂难以维护：在生命周期函数中混杂不相干的逻辑（如：在 componentDidMount 中注册事件以及其他的逻辑，在 componentWillUnmount 中卸载事件，这样分散不集中的写法，很容易写出 bug ），类组件中到处都是对状态的访问和处理，导致组件难以拆分成更小的组件。hooks的出现，让这一切变的更加easy。

react hooks的优势有哪些？

说了这么多，react hooks是有很多有点的：

1、能在无需修改组件结构的情况下复用状态逻辑---自定义hooks的特点

2、能将组件中相互关联的部分拆分成更小的函数

3、副作用的关注点分离：副作用指那些没有发生在数据向视图转换过程中的逻辑，如 ajax 请求、访问原生dom 元素、本地持久化缓存、绑定/解绑事件、添加订阅、设置定时器、记录日志等。以往这些副作用都是写在类组件生命周期函数中的。而 useEffect 在全部渲染完毕后才会执行，useLayoutEffect 会在浏览器 layout 之后，painting 之前执行。

react hooks 注意点有哪些？

任何事情都是一把双刃剑，尽管hooks有这样，那样的好处，但是也不是随便乱用，注意：

• 只能在函数内部的最外层调用 Hook，不要在循环、条件判断或者子函数中调用
• 只能在 React 的函数组件中调用 Hook，不要在其他 JavaScript 函数中调用

为什么要react hooks?

1、复用一个有状态的组件难于上晴天

我们知道react的核心思想是将一个页面拆解成一个个可以复用的组件，然后将自上而下的数据流将这些组件串联起来。但是在实际的项目中你会发现，有很多的react组件是冗长难以复用的。尤其是那些class的有状态组件，复用起来就更比较艰难。react官方给出的解决方案是属性渲染和高阶组件俩中方式。这里不展开说属性渲染和高阶组件。

2、生命周期函数逻辑非常复杂

我们一直希望，一个函数只做一件事儿，但是react生命周期函数通常做了很多事儿。比如说我们在componentsDidMount中发起了ajax请求，做了一些时间监听，同样这些事情，还要在componentDidUpdate中再做一边。一旦项目复杂，这样的代码将会惨不忍睹。

3、class组件迷之困惑 

我们在开发class组件的时候，常常会需要绑定this，一旦忘记，那各种bug就喷涌而出，另外，比较苦恼的是，当写了一个漂亮的无状态组件function的时候，因为需求变动，又要改成一个有状态组件，那么还又要改回class组件。

react自带的hooks函数有哪些？

useState()

useEffect()

useReducer

useContext()

useCallback()

useMemo()

useRef()

useLayoutEffect()

useMutationEffect()

.

.

.

hooks的路还很长，这才刚刚开始。。。