React常用钩子函数和context

1.useMemo

使用useMemo可以传递一个创建函数和依赖项，创建函数会返回一个值，只有在依赖项改变的时候，才会重新调用此函数，返回一个新的值。简单来说，就是让组件中的函数随状态更新。

使用方法：

1）接收一个函数作为参数

2）接收第二个参数作为依赖列表

3）返回一个值，返回值可以是函数，对象等都可以

复杂计算逻辑优化使用场景

未优化的代码如下，当点击div区域时，触发setAge，改变的是age，跟getDoubleNum方法其实是不相关的，但是在控制台中可以看到打印了很多次 获取双倍num，说明该方法不断被触发，其实是没有必要的如果计算量大，对性能是有影响的，所以需要进行优化

使用useMemo优化后代码如下。此时getDoubleNum方法是接收一个返回的值，使用useMemo后，再点击div区域改变age的值，此时执行返回的return 2*num以及打印只有在num更新时才会去执行，然后返回值给到fetDoubleNum再渲染到试图上，这样就减少了不必要的计算达到优化的作用

2.useRef

返回一个子元素索引，此索引在整个生命周期中保持不变，作用：长久保存数据，但是保存的数据发生改变的时候不会通知，且实行变更不会重新渲染

例：有一个需求，当计时器自增到某个值的时候清除该定时器，未使用useRef代码如下，当num大于10后，会发现不停的打印“大于10了，清除定时器”而其实定时器是没有清除掉的。所以会一直打印这个内容，而打印出的timer显示undifined，这是因为每次渲染都是通过setInterval重新返回timer，timer也在更新，也就丢失了这个数据，导致无法精准清除某个需要清除的定时器

使用useRef后

3. useLockFn

用于给一个异步函数增加竞态锁，防止并发执行

使用示例：

原来：

使用useLockFn后：

4. useDebounceFn

防抖动

使用示例：

5.context（上下文）

传递公共信息