React.memo 與 React.useMemo 的區別

1. 關於 React.memo 的相關描述

React.memo 函數是一個高階組件，通常我們用它來包裹一個組件（函數的入參）。

它會檢查入參組件的props的變更，相同的props會渲染相同的結果（跳過本次渲染操作並復用上一次的渲染結果）。

如果其包裹的是函數組件，並且該函數組件內部使用到了某些hook（類似useState、useContext等），當state或者context發生變化時，該組件仍會重新渲染。

function memo<P extends object>(
    Component: FunctionComponent<P>,
    propsAreEqual?: (prevProps: Readonly<PropsWithChildren<P>>, nextProps: Readonly<PropsWithChildren<P>>) => boolean
): NamedExoticComponent<P>;

function memo<T extends ComponentType<any>>(
    Component: T,
    propsAreEqual?: (prevProps: Readonly<ComponentProps<T>>, nextProps: Readonly<ComponentProps<T>>) => boolean
): MemoExoticComponent<T>;

默認情況下，memo函數只會對復雜對象做淺比較，如果想要手動控制比對過程，可以將自定義的比較函數通過第二個參數傳入來實現。

function TestComponent {}

function areEqual(prevProps, nextProps) {
  // 如果prevProps與nextProps一致，則返回true，否則返回false  
}

export default React.memo(TestComponent, areEqual);

React.memo是作為一種渲染性能優化手段而存在的。

例如，父組件重新render，通常其子組件也會重新渲染（盡管其外部props和內部state並沒有產生變化），這時為了避免子組件產生不必要的渲染，可以使用memo將其包裹，當props未發生變化時，可以不重新渲染。

 

2. 關於 React.useMemo 的相關描述

React.useMemo 也是用來調節控制渲染流程的，而且相對來說其顆粒度更細（通常是一個具體的值、狀態、函數，而不是組件）。

它會返回一個 memoized 值，且僅會在某些依賴項發生改變時才會重新計算（有點類似Vue的computed屬性），有助於避免在每次渲染時都進行高開銷的計算。

它可以避免因一些 函數發生了不必要的更新 而觸發的組件的重新渲染。

function useMemo<T>(factory: () => T, deps: DependencyList | undefined): T;

useMemo接受兩個參數，分別是：“創建”函數 和 依賴項數 ，

如果不傳依賴數組，傳入的函數每次都會重新執行計算；

如果傳空的依賴數組，則返回值被初始化后，不會再變化。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

 

end