React Hook的用法： Ref + useMemo + 自定义Hook(三)

Myth丶恋晨 2023-05-28 15:48 1阅读 0赞

# React Hook的用法 #

## Ref Hook ##

这个Hook的作用是可以通过他来获取到Dom元素节点，使用起来非常方便。  
关键代码如下:

const xxxEle = useRef(initialValue);

useRef返回一个ref变量，并接受一个初始值 initialValue 这个传入的初始值会复制给useRef返回变量的 .current 属性上(这里就是 xxxEle.current)。如果没有需要传入的初始值的话，一般直接传入 null 即可，然后就可以将返回的Ref变量附加在具体的dom元素上。类似下面

这样 xxxEle.current 属性就会一直指向该 Dom元素。

那么我们是否能够通过 Ref获取函数子组件呢？就类似在class 组件中父组件通过ref属性获取子组件的实例。答案是不能，因为只有class组件才有实例，函数本身是没有实例对象的。比如看下面这个例子，设计了有一个函数组件，使用同样的方式可以获取对应的 div元素的dom信息，但是却获取不了函数子组件的信息，打开控制台会显示null。

[**在线Demo**][Demo]

## useMemo Hook ##

一句话概括Memo的作用是把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

Memo Hook 使用起来和 Effect Hook 非常的相似，关键代码如下：

useMemo(fn,[params])

第一个参数是一个执行函数, 该函数(fn)会在该函数组件刚创建的时候执行一次，  
后面的参数是一个数组，数组中可以登记该函数组件中的变量，只有在第二个参数登记过的变量变化时才会再次执行fn函数。这就实现了有条件的去执行子组件函数中的部分逻辑了，从而实现减少了性能开销。  
下面设计了一个说明该作用的例子。在父组件中控制两个变量 age 和count,并可以通过按钮去改变对应的值。子组件直接接受并展示父组件传递过来的这两个变量。  
但是只有当父组件中 age 的值发生改变时，才会运行 ageChange 这个函数  
关键代码如下:

import React, { useMemo } from "react";

从React 中引入 useMemo这个钩子。  
在子组件中：

const ageVal = useMemo(() => ageChange(age), [age]);

子组件使用useMomo这个Hook，并在等二个参数中登记age这个变量，那只有父组件中age变量发生改变的时候才会运行 ageChange的方法，并且该函数经过ageChange业务处理后返回一个值(这里就是age本身)供子函数使用。

**[在线Demo][Demo 1]**

## 自定义Hook ##

通过前面两篇文章总结了业务中常见的几种React 提供的Hook, 除了React提供的Hook之外，当然开发者也可以根据自身业务场景需要开发出特定的Hook。可以说Hook天生自带轮子光环，用的好的话对平常中的业务开发是非常有用的，这里举一个例子，开发一个监听页面放缩的Hook并返回当前浏览器的尺寸。

[**在线Demo**][Demo 2]

[Demo]: https://codesandbox.io/s/react-hook-ref-demo-n4l2p
[Demo 1]: https://codesandbox.io/s/react-hook-memo-demo-4p28u
[Demo 2]: https://codesandbox.io/s/react-hook-zidingyihook-demo-6gft1