react Hook之介绍

class.Component现存的问题：

一、难以复用stateful的代码render props及HOC虽然解决了问题，可是对组件的包裹改变了组件树的层级，存在冗余。

二、与其余语言中的class概念差别较大，须要对事件处理函数作bind操做，使人困扰。另外class也不利于组件的AOT compile，minify及hot loading。 在这种背景下，React在16.8.0引入了React Hooks。

三、在同一辈子命周期方法中，有不相关的逻辑。而相关的逻辑要写在不一样生命周期函数中。如在ComponentDidMount、ComponentDidUpdate、ComponentWillUnmount等生命周期中作获取数据，订阅/取消事件，操做ref等相互之间无关联的操做，而把订阅/取消这种相关联的操做分开，下降了代码的可读性。

React Hook 解决了什么问题

一、函数组件不能使用state

在React Hooks推出以前，函数组件一般只能用于一些简单而无交互的场景，好比信息展现。当须要交互的时候咱们就得用臃肿的class组件来实现。

在React Hooks推出以后，函数组件可以使用state功能，而且比class组件更加简洁，更加好用。

能够预见的是，将来函数组件将会被大幅度地采用，这不只能给咱们带来很是爽的开发体验，同时也提升了咱们的开发效率和质量。

二、反作用的问题

一般数据获取、订阅、或手动修改ReactDOM这些行为，咱们能够称之为反作用(side effect)。

React Hooks提供了useEffect这个API来处理组件的反作用问题。那也就意味着你能够在函数组件内进行数据获取、订阅等操做。而在class组件里咱们须要依赖componentDidMount，componentDidUpdate，和 componentWillUnmount这几个生命周期方法来实现。

useEffect能够说是对这几个生命周期方法的统一。

三、有状态的逻辑重用的问题

在开发中咱们常常会遇到一些组件复用的问题，好比公共<Button>、弹窗、布局、卡片等等，又或者说一些可复用的业务逻辑，好比数据请求、关注和取消关注等等。

React Hooks能够很轻松地实现这些逻辑的封装，从而达到组件复用的效果。你彻底能够根据你的须要建立自定义的hooks。

简单点说就是，React Hooks解决了代码复用的问题。

这里有一个Hooks指南网站，它里面封装了几十个很是好用的hooks，而且还在不断地新增。

四、复杂状态管理的问题

对于复杂的状态管理，过去咱们使用redux、dva、mobx等第三方状态管理器来管理。

React Hooks推出以后，咱们能够再也不依赖这些第三方状态管理器了，咱们只须要依据React Hooks提供的API就能够实现复杂的状态管理。

主要就是useReducer、useContext这些API。

五、效率和质量的问题

React Hooks是纯函数式开发，相比于臃肿的class组件，函数组件开发体验更好，开发效率更高，应用性能更好。

React Hooks扩大了函数组件的应用范围，意味着咱们能够在绝大都数应用场景使用函数组件进行快速开发。