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