前言
这一节，将会主要介绍两个钩子：useCallback和useMemo,以及对自定义hooks的理解。
useCallback，反复渲染解决之道
无限请求的"怪象"
在介绍这个钩子之前，先来看一段react初学者很容易写出来的代码：
const [detail, setDetail] = useState();
// 通过后台接口请求数据，并设置到state中
const fetchDetail = async () => {try {const res = await xxxx;setDetail(res?.data || {});} catch(err) {// xxx}
};
// 期望类似于在componentDidMount生命周期中调一次接口获取详情
useEffect(() => {fetchDetail();
},[fetchDetail])
这段代码其实会引起严重的bug，打开network面板，我们将看到浏览器在疯狂向后台发请求。
这是因为重渲染的时候，上述的fetchDetail函数会被重新创建一遍，并放到deps依赖数组中，由于我们上文中说过，react对比deps里面的内容本质是通过Object.is来做的。两次渲染创建了两个函数，比较两个函数的引用，自然会得到不相等的结果。
用法
const memoFn = useCallback(fn,deps);
比如
const showUA = useCallback(function (){console.log(navigator.userAgent);
},[]);
原理
其本质就是将一个函数保存到组件外面，并将指向这个函数的指针返回。在这里我们可以粗咯地认为：useCallback可以避免函数哎每次渲染中被重复创建。
由于useCallback返回的是一个函数的引用，这个引用自然而然就可以放心地放入deps数组中。也就是说，每次渲染运行useCallback钩子拿到的函数引用都是一样的，都指向堆内存的同一个地址。两个引用对比相等，则不会再次运行effectFn。
我们将开头的怪象代码改造如下：
const [detail,setDetail] = useState();
const fetchDetail = useCallback(async () => {try {const res = await xxx;setDetail(res?.data || {});} catch(err) {// xxx}
});
useEffect(() => {fetchDetail()
}, [fetchDetail])
useMemo,React中的Computed
useMemo是useCallback的超集。 useMemo用来缓存一个函数的执行结果。这非常类似于vue中的computed计算属性。假如一个函数的执行结果返回了一个函数，也就相当于缓存了一个函数。这就是为什么说useMemo是useCallback的超集，如下：
const memoFn = useCallback(() => console.log('111'), [])
const memoFn2 = useMemo(() => () => console.log('111'), [])
当然，我们一般不会这么做，让useCallback缓存函数引用，useMemo缓存函数执行结果吧！各司其职，易于理解。useMemo一般用法如下：
const memoValue = useMemo(() => a * b, [a, b]);
React.memo + useCallback, 避免子组件无谓的渲染
这是一个常用的性能优化手段。
其实React.memo完全可以用useMemo来代替，这里就看个人使用习惯了，就我个人来说，比较喜欢在组件缓存时用React.memo。
我们做个小实验：
// App.tsx
import React, { useState } from "react";
import Sub from "./Sub";
function App() {const [num, increaseNum] = useState(0);const logFn = () => console.log("logging...");return (<><Sub logFn={logFn} /><h1>{num}</h1><button onClick={() => increaseNum((prev) => prev + 1)}数字增加</button></>);
}
export default App;
// Sub.tsx
import React, { useEffect } from "react";
export interface SubProps {logFn: () => void;
}
const Sub: React.FC<SubProps> = ({ logFn }) => {useEffect(() => {cosnole.log("sub render");});return <button onClick={logFn}>打印</button>;
};
export default Sub;
非常简单的一个示例，运行上述代码时可以发现：父组件点击数字+1，子组件莫名其妙被重渲染，打印出sub render。
所以这里我们需要两步：
1.缓存子组件，避免子组件无条件重渲染，这是一定要做的;
2.如果子组件用到了父组件内声明的函数，则缓存该函数，避免出现 “父组件重渲染 --> 重新创建函数 --> 子组件受影响重渲染”这样的问题。
上述代码关键地方改造如下（其他地方保持不变）：
// App.tsx
const logFn = useCallback(() => console.log("loggin..."), []);
// Sub.tsx
export default React.memo(Sub);
改造完后，父组件再点击数字+1，可以发现子组件已经不会重渲染了。
自定义hooks，逻辑封装与组合
很喜欢一句话：大千世界无奇不有，但实际上不过是由一百多种元素组成。
所谓自定义hook，就是基于官方的几种hook，通过各种排列组合+实际业务场景得到的独立逻辑体，自定义hook就像是hooks中的歌曲，只要有创造力，脑洞够大，就能写出令人惊叹的自定义hook。
用法
如下是一个简单的示例：
const useFetchUserInfo = () => {const [isLoading, setIsLoading] = useState(false);const [userInfo, setUserInfo] = useState();const fetchFn = useCallback(async () => {setIsLoading(true);try {const res = await xxxx;setUserInfo(res??.data || {})} finally {setIsLoading(false);}});return [isLoading, userInfo, fetchFn];
}
关于自定义hooks应该return一个数组还是对象，并没有明确的所谓“最佳实践”，我个人认为如果返回的内容足够简单，可以使用数组返回；如果内容较多，则使用对象返回。
还需要注意两个问题：
1.自定义hook的命名格式一定要为useXXX。后面的单词首字母还必须大写，如果尝试违反这种命名规则，编辑器会报错；
2.react官方的hook只能在函数式组件（通过首字母大写+返回ReactElement来判断）里面、或者自定义hook里面，且只能在顶层调用。
原理
其实跟之前的useState和useEffect调用的方式一样，无论是生成链表还是读取链表，这个过程都完全一致。因为我们要明白自定义hook的本质，它不过就是把几个官方内置hook的调用过程封装成了一个可复用的函数，并没有增加新的内容。
建议
在这一部分中，我们在项目使用了阿里开源的ahooks，着实为项目解决了不少问题，这是一个非常成熟的生产级别的自定义hooks库，后续可以考虑继续使用。最后，为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。
有需要的小伙伴，可以点击下方卡片领取，无偿分享