React Hook介绍与使用心得

Posted 2023-02-21

参考技术A

React Hook 对于React来说无疑是一个伟大的特性，它将React从类组件推向了函数组件，从而让人们对于javascript的理解不再去可以理解晦涩的JS中的类，以及难以琢磨的this。在《你不知道的JavaScript》上卷中，作者就对JavaScript中的类，继承，面向对象做了一定的解释，总的来说就是，在JavaScript中生搬硬套用面向对象，得不偿失，很容易造成学习和理解负担。

在React16之前没有Hook的时候，必须在类组件去维护组件状态，因此必须理解JS中this的工作机制，并且在给元素绑定事件的时候总是需要绑定this。在组件之间复用状态逻辑比较困难，官方提供的 render props 和 高阶组件 确实很好用，但是整个用起来感觉很重，具体关于对类组件的吐槽可以参考React官网 Hook简介 这部分内容。

当使用React Hook去写React应用后，会发现再也不想用类组件了。。。

官方是这么介绍Hook的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

在React中提供了以下几种Hook

示例：

将useState这个钩子从react中导入，在函数组件Login中利用解构赋值的方式声明两个常量 num ， setNum 作为 useState(0) 的返回值，useState钩子返回一个数组，第一个参数是我们声明的 state变量 ，第二个参数是一个 方法 ，用来手动改变第一个参数。

语法： const [num, setNum] = useState(0)

useState接受参数为基本类型如数字字符串等，也可以是引用类型对象数组等。用来作为初始值。

关于 useState返回值的第二个参数

示例：

官网这么说：如果你熟悉 React class 的生命周期函数，你可以把 useEffect Hook 看做 componentDidMount ， componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

useEffect接收一个 函数 为第一个参数。

关于useEffect 这个Hook，它的形式有以下几种：

说了这么多那到底什么是 副作用 ？

React官网是这样解释的：数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。不管你知不知道这些操作，或是“副作用”这个名字，应该都在组件中使用过它们。

也就是说，当函数在运行的过程中对外部环境造成影响，或者与外部环境发生交互。比如操作DOM，发起请求，设置订阅这种，都属于副作用。同时有些副作用需要清除，比如订阅解绑，定时器延时器清除，有些不需要清除，比如数据获取，操作DOM。

那什么样的函数没有副作用呢？纯函数是不会有副作用的。

在使用useEffect hook的时候可以使用多个Effect分离关注点：

举一个场景来说下：弹窗场景。在父组件中点击按钮打开弹窗，在弹窗内部点击关闭按钮关闭弹窗。

此时控制弹窗打开与关闭的只能是一个状态isOpen，此时这个isOpen状态就需要在字符组件中共享。

使用isOpen控制弹窗的显示与隐藏，在父组件中调用setIsOpen方法，打开弹窗，在弹窗组件中使用useContext共享的父组件中的方法setIsOpen关闭弹窗。

注：父子组件一般不会存在一个文件中，需要将popContext导出再在子组件中导入使用。

官网这样解释： useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

示例：

useReducer第一个参数是一个reducer函数，第二个参数是初始化状态，在reducer函数中根据不同的type对state进行不同的处理。类似于redux中的reducer。

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（ initialValue ）。返回的 ref 对象在组件的整个生命周期内保持不变。

这个看来有两种用法：

第一种就是命令式操作DOM元素

第二种是关于其另外一个特性变更 .current 属性不会引发组件重新渲染

使用 myRef.count 来统计组件渲染次数。每一次组件重新渲染的时候，都将返回同一个 myRef 对象，并且， myRef 对象发生变化时，并不会导致组件渲染，这样的特性可以用来处理一些特殊场景下的需求。

当自定义一个myRef对象时，每次组件重新渲染都将返回一个新的对象。

这两个Hook可以用来做优化，比如以下例子，有name和age两个状态，子组件只需要在name发生变化时重新渲染，而在age发生变化时不需要重新渲染。

示例：

useMemo第一个参数接收一个函数第二个参数接收一个数组 useMemo(()=>fn, []) ，数组里面是依赖，只有数组里面的依赖发生变化，函数才会执行。

useCallback(fn, deps) 相当于 useMemo(() => fn, deps) 。

React 官方也在极力推动Hook的发展，并且近期也有了React准备重写文档，更新后的文档针对Hook的内容肯定会更多，而且Vue在3.0版本出来后也使用了类似于React Hook的机制Composition API，这也是一个趋势。

最近在用webpack4+react16+ts4做自己的一个移动端小博客，功能正在完善中，主要是想学习使用一下React技术栈，期间发现React Hook确实非常好用，因此做一些记录。

博客 github 地址： https://github.com/Mstian/mobile-react-blog

线上地址： http://m.tianleilei.cn （开发中）