React Hook

150 阅读3分钟

React Hooks是React 16.8 版本推出的新特性.

React Hook对以前的React做了一些使用优化:

一、为共享状态逻辑提供更好的原生途径

在React应用开发中,数据状态的传递有父组件到子组件之间,兄弟组件之间,父组件之间等,React本身没有对数据传递的问题又一个很好的解决方案,因此我们引进了redux,context等等。有了hook之后,你可以使用 Hook 从组件中提取状态逻辑,使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。

二、优化了数据状态改变导致的不必要的渲染

当父组件的某个状态值改变时,子组件也会重新渲染,哪怕子组件根本没有用到这个状态值,hook对此种情况用useMemo做了优化。useEffect、useCallback也是对冗余的渲染做了优化。

三、将组件中相互关联的部分拆分成一个函数,而并非强制按照生命周期划分

我们经常维护一些组件,组件起初很简单,但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如,组件常常 在componentDidMount 和 componentDidUpdate 中获取数据。但是,同一个 componentDidMount 中可能也包含很多其它的逻辑,如设置事件监听,而之后需在 componentWillUnmount中清除。相互关联且需要对照修改的代码被进行了拆分,而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug,并且导致逻辑不一致。因此hook将组件中相互关联的部分拆分成一个函数,而并非强制按照生命周期划分。

四、让结构简单的函数组件也可以用到类似类组件的状态、生命周期这些特性

众所周知,React提供了两种创建组件的方式,即函数组件和类组件。函数组件是一个普通的JavaScript函数,接受props对象并返回React元素,函数组件更符合React数据驱动视图的开发思想。不过,函数组件一直以来都因为缺乏类组件诸如状态、生命周期等种种特性,也因为这些原因函数组件得不到开发者的青睐,而Hooks的出现就是让函数式组件拥有类组件的特性。

为了让函数组件拥有类组件的诸如状态、生命周期等特性,React 提供了3个核心的api,即State Hooks、Effect Hooks和Custom Hooks。 useState就是React提供最基础、最常用的Hook,主要用来定义和管理本地状态。

五、减轻了React上手学习成本,不用学习class复杂的函数式或响应式编程技术,而是更靠近便于使用的函数。

以前的React 最常使用的就是类组件,但是你就要去理解JavaScript 中 this 的工作方式,绑定事件处理器等等,非常复杂和困难,新手不容易上手;并且类组件使用会出现一些问题,例如class 不能很好的压缩,并且会使热重载出现不稳定的情况。

下面是具体的例子介绍:

useState:

用于初始化和改变state的值,用法:const [count, setCount] = useState(0);

useEffect:

useMemo:

useCallback:

useRef:

Custom Hooks: