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 多少次，我们的函数都是同一个函数，减小不断创建的开销。