hooks的出现

162 阅读3分钟

为什么需要Hook?

Hook 是 React 16.8 的新增特性,它可以让我们在不编写class的情况下使用state以及其他的React特性(比如生命周期)。

-class组件相对于函数式组件比较常见的是下面的优势:

-class组件可以定义自己的state,用来保存组件自己内部的状态; 函数式组件不可以,因为函数每次调用都会产生新的临时变量;

-class组件有自己的生命周期,我们可以在对应的生命周期中完成自己的逻辑;比如在componentDidMount中发送网络请求,并且该生命周期函数只会执行一次;函数式组件在学习hooks之前,如果在函数中发送网络请求,意味着每次重新渲染都会重新发送一次网络请求;

-class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate等;

-函数式组件在重新渲染时,整个函数都会被执行,似乎没有什么地方可以只让它们调用一次; 所以,在Hook出现之前,对于上面这些情况我们通常都会编写class组件

Class组件存在的问题

复杂组件变得难以理解:

我们在最初编写一个class组件时,往往逻辑比较简单,并不会非常复杂。但是随着业务的增多,我们的class组件会变得越来越复杂; 比如componentDidMount中,可能就会包含大量的逻辑代码:包括网络请求、一些事件的监听(还需要在 componentWillUnmount中移除); 而对于这样的class实际上非常难以拆分:因为它们的逻辑往往混在一起,强行拆分反而会造成过度设计,增加代码的复杂度。

难以理解的class:

学习ES6的class是学习React的一个障碍。 比如在class中,我们必须搞清楚this的指向到底是谁。

组件复用状态很难:

在前面为了一些状态的复用我们需要通过高阶组件或render props; 像我们之前学习的redux中connect或者react-router中的withRouter,这些高阶组件设计的目的就是为了状态的复用;或者类似于Provider、Consumer来共享一些状态,但是多次使用Consumer时,我们的代码就会存在很多嵌套;这些代码让我们不管是编写和设计上来说,都变得非常困难。

Hook的出现

hooks:

它可以让我们在不编写class的情况下使用state以及其他的React特性;

我们可以由此延伸出非常多的用法,来让我们前面所提到的问题得到解决。

Hook的使用场景:

Hook的出现基本可以代替我们之前所有使用class组件的地方(除了一些非常不常用的场景);

但是如果是一个旧的项目,你并不需要直接将所有的代码重构为Hooks,因为它完全向下兼容,你可以渐进式的来使用它;

Hook只能在函数组件中使用,不能在类组件,或者函数组件之外的地方使用。