React中useMemo与useCallback区别以及各自解决什么性能问题、依赖陷阱详解

function App() {
  const a = 1;

  const fn = () => {
    console.log(a);
  };

  return <Child fn={fn} />;
}

fn1 !== fn2

{ name: '张三' } !== { name: '张三' }

缓存值 → useMemo
缓存函数 → useCallback

const value = useMemo(
  () => expensiveFn(a, b),
  [a, b]
);

依赖没变：
返回上次结果

依赖变：
重新执行计算

function App({ list }) {

  const total = list.reduce(
      (sum,item)=>sum+item.price,
      0
  );

  return <div>{total}</div>
}

O(n)

const total = useMemo(() => {
    return list.reduce(
        (sum,item)=>sum+item.price,
        0
    );
},[list]);

sort()

filter()

reduce()

<Child options={{
   page:1,
   size:10
}}/>

{} !== {}

const options = useMemo(() => ({
    page:1,
    size:10
}),[]);

<Child options={options}/>

const fn = useCallback(() => {

},[deps]);

const fn = useMemo(
   ()=>()=>{},
   [deps]
)

useCallback ≈ useMemo(返回函数)

function App(){

 const click=()=>{
      console.log("点击")
 }

 return <Child onClick={click}/>
}

click1 != click2

const click = useCallback(()=>{

},[]);

React.memo()

const Child = React.memo(
    ({onClick})=>{

}
);

props变化

父更新
↓
子不更新

useMemo 缓存结果
useCallback 缓存方法

const [count,setCount]=useState(0);

const add = useCallback(()=>{
    console.log(count);
},[]);

[]

0
0
0

const add = useCallback(()=>{
   console.log(count)
},[count]);

const options = {
   page,
   size
}

const fn = useCallback(()=>{

},[options]);

options 新对象

缓存失效
重新创建函数

[page,size]

const a = useMemo(()=>1,[]);

比较依赖
存缓存
维护引用

const a=1;

const fn = useCallback(()=>{},[]);

<Child fn={fn}/>

React.memo()

useCallback + React.memo

const fn = useCallback(()=>{},[])
const obj = useMemo(()=>({}),[])

排序
filter
大列表
图表
PDF
Excel

React.memo 子组件
useEffect 依赖
事件回调