memo、useCallback、useMemo三者的區別

相同點

1.都是在函數式組件中使用
2.都是為了阻止子組件的被動渲染(父組件重新render，子組件也跟着render)

不同點

1.memo

memo類似於PureCompoent 作用是優化組件性能，防止組件觸發重渲染
不足: 如果參數中含有函數不能阻止
有點: 緩存組件
使用場景: 不給子組件傳遞函數，並且子組件根據自身以來渲染

2.useMemo

useMemo其實和memo是一樣的
不足: 如果參數中含有函數不能阻止
優點: 緩存變量(返回的變量)
使用場景: 不給子組件傳遞函數，並且子組件根據自身以來渲染

useMemo使用

• 在子組件中通過memo方法，對子組件進行包裹
• 在父組件中，通過useMemo對傳給子組件的數據進行包裹

const ChildComponent = memo(() => {
  return <div></div>;
});

const ParentComponent = () => {
 const [name, setName] = useState('tom');
 const userInfo = useMemo(() => {
  return {name, age: 20};
 },[]);
};

3.useCallback

useCallback是解決上面兩個的不足的
優點: 可以緩存函數，(返回的是函數，每次都返回新的函數)
使用場景: 給子組件傳遞函數，將要傳遞的函數用useCallback包裹起來