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