共计 1357 个字符，预计需要花费 4 分钟才能阅读完成。
背景
在目前的 react 开发中，很多新我的项目都采纳函数组件，因而，咱们免不了会接触到 hooks。
此外，Hooks 也是前端面试中 react 方面的一个高频考点，须要把握罕用的几种 hooks。
罕用的有
根本：useState, useEffect, useContext
额定：useCallback, useMemo, useRef
刚接触公司的 react 我的项目代码时，发现组件都是用的函数组件，不得不去学习 hooks，之前只会类组件和 react 根底
其中 useState 不用说了，很容易了解，使咱们在函数组件中也能像类组件那样获取、扭转 state
我的项目中很多中央都有 useEffect, useCallback, useMemo, 初看时感觉这三个都是包着一个货色，有它们跟没有它们感觉也没什么区别，很难分清这三个什么时候要用
所以这里就稍微总结一下，附上一点集体在开发过程中的了解。
其实这三个区别还是挺显著的，
useEffect
| // 根本用法 | |
| useEffect(() => {console.log('这是一个不含依赖数组的 useEffect，每次 render 都会执行！') | |
| }) |
useEffect 能够帮咱们在函数组件中实现 像类组件中的生命周期那样某个阶段做某件事情 (次要是 componentDidMount，componentDidUpdate 和 componentWillUnmount)
useEffect 规定
- 没有传第二个参数时，在每次 render 之后都会执行 useEffect 中的内容
- useEffect 承受第二个参数来管制跳过执行，下次 render 后如果指定的值没有变动就不会执行
- useEffect 是在 render 之后浏览器曾经渲染完结才执行
useEffect 的第二个参数是可选的，类型是一个数组
依据第二个参数的不同状况，useEffect 具备不同作用
1. 空数组
useEffect 只在第一次渲染时执行，因为空数组中没有值，始终没有扭转，所以后续 render 不执行，相当于生命周期中的 componentDidMount
useEffect(() => { console.log('只在第一次渲染时执行') }, []);
2. 非空数组
无论数组中有几个元素，数组中只有有任意一项产生了扭转，useEffect 都会调用
useEffect(() => { getStuInfo({ id: stuId}); }, [getStuInfo, stuId]); //getStuInfo 或者 stuId 扭转时调用 getStuInfo 函数
useCallback 和 useMemo
useCallback 和 useMemo 都是性能优化的伎俩，区别是 useCallback 返回一个函数，当把它返回的这个函数作为子组件应用时，能够防止每次都去从新渲染这个子组件，
| const renderButton = useCallback(() => ( | |
| <Button type="link"> | |
| {buttonText} | |
| </Button> | |
| ), | |
| [buttonText] // 当 buttonText 扭转时才从新渲染 renderButton | |
| ); |
useMemo 返回的的是一个值，用于防止在每次渲染时都进行高开销的计算。例：
const text = useMemo(() => (type === '1' ? '胜利' : '失败'), [type]);
