React Hook的用法

Ref Hook

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

const xxxEle = useRef(initialValue);

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

<div ref={divEle}></div>

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

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

在线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

自定义Hook

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

在线Demo