这是我参与11月更文挑战的第12天，活动详情查看：2021最后一次更文挑战
大家好，今天我们来了解一下React Hooks里其他的一些钩子函数：useCallback以及useMemo
一、前情
React在每一次状态发生改变时，都会重新触发render，以保证数据与视图之间的统一，React是默认重新渲染所有组件的，若父组件状态发生了变化，则也会导致挂载在当前父组件下的子组件重新渲染，那这样则会造成资源浪费。
二、useCallback和useMemo
1.useCallback
我对useCallback的理解：useCallback是根据限定条件对函数进行一个缓存，避免父组件状态更新时产生不必要的重新的函数赋值。当将useCallback返回的函数作为组件使用后，若限定的条件没有触发，则省去了函数组件的重新渲染的开销。
useCallback的使用：useCallback接收两个参数，第一个参数是需要缓存的函数，第二个参数则是一个数组，数组内的元素是限定重新渲染的条件（条件内的变量变化时才触发重渲染）
在不使用useCallback时，状态更新就会触发子组件的重新渲染，下面我们来使用useCallback来包装一个子组件：
const TestUseCallback = () => {
const [number,setNumber] = useState(0);
const Children = () => {
return (
<div>
<h1>num:{number}</h1>
<button>Send</button>
</div>
)
}
const ShowChildren = useCallback(Children,[number]);
return (
<div>
<ShowChildren />
<button onClick={ ()=>{ setNumber(number=>number+1) } }>+1</button>
</div>
)
}
当所设定的条件变量即number被修改时，子组件ShowChildren才重新渲染
2.useMemo
我们通常在频繁高开销计算的场景下使用useMemo，我们可以使用useMemo将指定属性和处理逻辑缓存起来。对一个需要进行高开销计算的操作，我们可以指定某个变量变化时才需要重新计算，避免浪费资源，这就很像是对一个属性进行缓存。
使用方法：
useMemo传入两个参数：第一个参数为一个函数，第二个参数为限制条件的数组
const result = useMemo(() => {
for (let i = 0; i < 50000; i++) {
(num * Math.pow(8, 15)) / 1024;
}
}, [num]);
