React.memo、useMemo、useCallback

React.memo

React.memo是一个高阶组件，用于优化函数组件的性能。它通过记忆组件渲染输出，避免在相同的props下重复渲染组件。

工作原理：

• React.memo接受一个组件并返回一个新组件，该组件只有在props改变时才会重新渲染。
• 默认情况下，它对props进行浅比较。
• 可以提供一个自定义的比较函数来更精确地控制重新渲染的行为。

import React from 'react';

const MyComponent = React.memo(
  (props) => {
    // 组件逻辑
    return <div>{props.value}</div>;
  },
  (prevProps, nextProps) => {
    // 自定义比较函数
    return prevProps.value === nextProps.value;
  }
);

useMemo

useMemo是一个React Hook,用于记忆一个函数的计算结果。它帮助避免在每次渲染时重新计算那些代价高昂的计算。

工作原理：

• useMemo接受一个函数和一个依赖项数组。
• 只有在依赖项发生变化时才会重新计算memoized值。
• 用于优化性能，通过记忆那些代价高昂的计算或操作的结果。

import React, { useMemo } from 'react';

const MyComponent = (props) => {
  const memoizedValue = useMemo(() => {
    // 代价高昂的计算
    return computeExpensiveValue(props.input);
  }, [props.input]);

  return <div>{memoizedValue}</div>;
};

useCallback

useCallback是一个React Hook，用于记忆一个回调函数。它帮助避免在每次渲染时创建新的回调函数，从而防止不必要的重新渲染。

工作原理：

• useCallback接受一个回调函数和一个依赖项数组。
• 只有在依赖项发生变化时才会返回一个新的回调函数。
• 用于优化性能，通过记忆那些不需要每次渲染都重新创建的回调函数。

import React, { useCallback } from 'react';

const MyComponent = (props) => {
  const memoizedCallback = useCallback(() => {
    // 回调逻辑
    doSomething(props.input);
  }, [props.input]);

  return <button onClick={memoizedCallback}>Click me</button>;
};

区别和使用场景

• React.memo：用于防止函数组件在相同的props下重新渲染。它适用于记忆整个组件的渲染结果。
• useMemo：用于防止在每次渲染时重新计算那些代价高昂的计算结果。它适用于记忆组件内部某些代价高昂的计算或派生状态。
• useCallback：用于防止在每次渲染时重新创建回调函数。它适用那些不需要每次重新创建的回调函数，从而防止因回调函数变化而导致的子组件重新渲染。