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

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

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

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

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

在线Demo

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

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

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

import React, { useMemo } from "react";
1
从React 中引入 useMemo这个钩子。
在子组件中：

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

在线Demo

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

在线Demo
————————————————
版权声明：本文为CSDN博主「问白」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_38080573/article/details/104898950