React函数式组件值之useMemo()和useCallback()
一、基础用法
- useMemo可以保证依赖的值未发生改变的时候，不触发值改变。
- useCallback可以保证依赖的值未发生改变的时候，不触发函数引用的改变。
1 //当count变化，sum的值会改变
2 const sum = useMemo(() => {
3 return count + 1;
4 }, [count]);
5 //当count变化，getSum函数会改变
6 const getSum = useMemo(() => {
7 return count + 1;
8 }, [count]);
第二参数含义：
- 不传数组，每次更新都会重新计算
- 空数组，只会计算一次
- 依赖对应的值，当对应的值发生变化时，才会重新计算
二、应用场景
React的函数式组件在直接使用useState或使用useEffect间接调用useState时，会导致整个函数的重新执行。其中，函数组件包裹的所有的变量、常量、函数都会被重新初始化，相当于props整体更新，所有组件内的子组件重新绘制。但并不是每个子组件都有必要重绘，有的根本没有变化，这时，就需要使用useMemo和useCallback保证函数组件内常量与函数的唯一性。
1 import React, { useState, memo, useMemo, useCallback } from 'react'
2 const Child = memo((props) => {
3 console.log(props);
4 return (
5 <div>
6 <input type="text" onChange={props.onChange}/>
7 </div>
8 )
9 })
10 const Parent = () => {
11 const [count, setCount] = useState(0)
12 const [text, setText] = useState('')
13 const handleOnChange = useCallback((e) => {
14 setText(e.target.value)
15 },[])
16 return (
17 <div>
18 <div>count: {count}</div>
19 <div>text: {text}</div>
20 <button onClick={() => {
21 setCount(count + 1)
22 }}>+1</button>
23 <Child onChange={handleOnChange} />
24 </div>
25 )
26 }
27 function App() {
28 return <div><Parent /></div>
29 }
30 export default App
上面代码中，handleOnChange被缓存了下来，尽管父组件更新了，但是拿到的handleOnChange还是同一个，对比useMemo，useMemo缓存的是一个值，useCallback缓存的是一个函数，是对一个单独的props值进行缓存，memo缓存的是组件本身，是站在全局的角度进行优化。
需要注意的是，useMemo 会在渲染的时候执行，而不是渲染之后执行，这一点和 useEffect 有区别，所以 useMemo 不建议有 副作用相关的逻辑。
useMemo根据依赖的值计算出结果，当依赖的值未发生改变的时候，不触发状态改变。一般开发，在向子组件传递函数props时，每次 render 都会创建新函数，导致子组件不必要的渲染，浪费性能，这个时候，就是 useCallback 的用武之地了，useCallback 可以保证，无论 render 多少次，我们的函数都是同一个函数，减小不断创建的开销。
