聊一聊ReactHook给React生态带来的便利01

熊孩子依旧调皮
123 阅读2分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

什么是Hook

hook是React 16.8x才新增的比在此之前更快捷的一个性能

请牢记此版本号，如果是新项目则不用考虑，如果是维护之前的老项目则需要注意下！，检查版本号直接用React.version查看

为什么用它，带来的便利是什么

在此之前写类组件的时候，用的是类组件，原因是类组件可以自定义状态值，函数组件是没状态值的，在函数组件内定义个状态，看下会发生什么：

import React,{useState} from 'react'
function test(){
    const {testNum,setTestNum} = useState(222)
    return(
        <div>{testNum}</div>
    )
}

定义一个testNum的state的变量，当如果要在函数内部定义变量时，组件每次更新则都会被初始化

let testNewNum = 0 如果把该变量定义到全局，则很容易污染全局变量，那该如何解决？ 在函数内的useState()，通过闭包的形式来实现，实际上testNum是变量,setTestNum是方法

它的出现解决了什么问题

组件之间的逻辑很复杂，它没有一个能直接修改该属性的方法，而是修改某一个值而造成局部刷新

在这之后出现了高阶组件，但是使用它至少需要两层括号来表达，再配上context这就是四层括号，很是繁琐 hook出现之后主要解决了，多组件复用状态逻辑比较难的问题（俗称自定义Hook）

function FunctionTest(props) {
  const [count, setCount] = useState(0);
  return (
    <div className="border">
      <button
      onClick={() => {
        setCount(count + 1);
      }}>
        {count + ""}
      </button>
    </div>
  );
}

当定义完一个函数组件，首先会执行一次useState状态定义，这个状态是每个函数独有的，通过闭包的方式为状态来赋值，而且它把生命周期和class已经彻底的区分开了

API

  • 基础的Hook
  1. useState 函数，它是定义单独的状态值，可修改可调用
  2. useEffect页面初始化，定义数据，状态改变，组件销毁时调用
  3. useContext可在函数组件内快速访问到状态
  • 额外的Hook
  1. useReducer解决一些比较难的变量逻辑
  2. useCallback在函数内提供缓存
  3. useRef为某个元素定义定义一个类似于ID绝对值，来对它进行一些操作
  4. useImperativeHandle把某个变量或者是组件暴露给父组件

总结

在hook没有出现前，也是有函数式编程，但是很少直接用，因为函数组件内没有状态值，无法直接使用难度不小，hook出现后它是可以直接替代类组件在加上它本身丰富的API来进行开发，便利性大大增加。

avatar
文章
阅读
粉丝