React中如何避免不必要的render？memo、useMemo、useCallback?

React 基于虚拟 DOM 和高效 Diff 算法的完美配合，实现了对 DOM 最小粒度的更新，大多数情况下，React 对 DOM 的渲染效率足以满足我们的业务日常需求。

然而，在复杂业务场景下，仍然可能会遇到性能问题。这时，我们可以采取一些优化措施来提升运行性能。其中，避免不必要的渲染是业务中常见的优化手段之一。React 提供了一些优化机制，如 shouldComponentUpdate(类式组件) 或 React.memo（用于函数组件）来控制组件的更新行为，从而避免在无需更新的情况下进行 DOM 操作。通过合理使用这些优化机制，我们可以减少不必要的渲染，进一步提高 React 应用的性能和响应性。

我们知道在Reac中render的触发时机，简单来讲就是类组件通过调用setState方法或函数组件调用useState hook的更新钩子， 就会导致render，父组件一旦发生render渲染，子组件一定也会执行render渲染。

例如我们在父组件中向子组件传递一个props,在父组件调用更新的hooks时，尽管传递给子组件的props没有改变，但是子组件会跟着父组件重新渲染，这样会造成不必要的渲染：

//父组件
export default function Father() {
const [text,setText] = useState('初始值')
const [variable,setVariable] = useState('初始值')
const changeText = ()=>{
    setText("修改后的text")
}
  return (
    <div>{text}</div>
    <Son name={variable}/>
    <button onClick={changeText}></button>
  )
}

//子组件

export default function Son(props) {
  console.log("render")
  return (
    <div>{props.name}</div>
  )
}

 在上述例子中，父组件Father向子组件Son传递了props为变量variable,当在页面中点击button改变父组件中的text数据时，父组件会重新渲染，顺带着子组件Son也会重新渲染一次。尽管传入Son的props没有发生改变，这就造成了不必要的资源浪费。我们就可以使用如下方式避免无谓的渲染：

• shouldComponentUpdate （类式组件）
• PureComponent  （类式组件）
• React.memo  （函数式组件）
• React.useMemo（函数式组件）
• React.useCallBack（函数式组件）

 

shouldComponentUpdate

通过shouldComponentUpdate生命周期函数来比对 state和 props，确定是否要重新渲染

默认情况下返回true表示重新渲染，如果不希望组件重新渲染，返回 false 即可

PureComponent

和shouldComponentUpdate原理基本一致，通过对 props 和 state的浅比较结果来实现 shouldComponentUpdate，源码大致如下： 

if (this._compositeType === CompositeTypes.PureClass) {
    shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

 shallowEqual对应方法大致如下：

const hasOwnProperty = Object.prototype.hasOwnProperty;

/**
 * is 方法来判断两个值是否是相等的值，为何这么写可以移步 MDN 的文档
 * https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
 */
function is(x: mixed, y: mixed): boolean {
  if (x === y) {
    return x !== 0 || y !== 0 || 1 / x === 1 / y;
  } else {
    return x !== x && y !== y;
  }
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 首先对基本类型进行比较
  if (is(objA, objB)) {
    return true;
  }

  if (typeof objA !== 'object' || objA === null ||
      typeof objB !== 'object' || objB === null) {
    return false;
  }

  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  // 长度不相等直接返回false
  if (keysA.length !== keysB.length) {
    return false;
  }

  // key相等的情况下，再去循环比较
  for (let i = 0; i < keysA.length; i++) {
    if (
      !hasOwnProperty.call(objB, keysA[i]) ||
      !is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }

  return true;
}

当对象包含复杂的数据结构时，对象深层的数据已改变却没有触发 render，因此在react中，是不建议使用深层次结构的数据

React.memo

上面讲述了类式组件的解决方案后，接下来我们讲述函数式组件的解决方案。React.memo用来缓存组件的渲染，避免不必要的更新，其实也是一个高阶组件，在上述例子中我们只需要在上述例子中子组件Son返回时使用memo函数包裹：

import { memo } from 'react';
function Son(props) {
  console.log("render")
  return (
    <div>{props.name}</div>
  )
}
export default memo(Son)

经过上述包裹后，会对传入的props进行浅层次比较，如果没有改变则该组件不会触发render。

如果需要深层次比较，这时候可以给memo第二个参数传递比较函数:

function arePropsEqual(prevProps, nextProps) {
  // your code
  return prevProps === nextProps;
}

export default memo(Son, arePropsEqual);

这里注意与shouldComponentUpdate不同的是，arePropsEqual返回true时代表不会触发render,如果返回false,则会触发该组件的render。

React.useMemo

useMemo 是 React 提供的一个钩子（Hook），用于在函数组件中进行记忆化处理。它的主要作用是在函数组件的渲染过程中缓存计算的结果，并在依赖项不变的情况下直接返回缓存结果，避免重复计算，从而提高性能。

useMemo 接受两个参数：一个是函数，另一个是依赖项数组。

const memoizedValue = useMemo(() => {
  // 在这里进行需要缓存的计算
  return someExpensiveComputation(dep1, dep2);
}, [dep1, dep2]);

在这个例子中，useMemo 接受一个函数作为第一个参数。这个函数是需要进行缓存计算的代码块。当组件渲染时，React 会执行这个函数并将返回的值保存下来。

第二个参数是依赖项数组。这个数组包含了在计算过程中所依赖的变量。只有当这个数组中的变量发生变化时，useMemo 才会重新执行函数计算。如果依赖项数组中的变量在两次渲染之间没有发生变化，React 将会跳过重新计算步骤，并直接返回上一次缓存的结果。

使用 useMemo 的主要场景是在需要进行耗时计算或昂贵的数据转换时。通过缓存计算结果，可以避免在每次渲染时都重新计算相同的值，从而提高性能。

需要注意的是，虽然 useMemo 可以优化性能，但并不是在所有情况下都需要使用。过度使用 useMemo 可能会导致代码复杂化，而在某些情况下，简单的重新计算可能比缓存结果更高效。因此，建议在真正需要优化的场景下使用 useMemo。

 useCallback

useCallback 是 React 提供的另一个钩子（Hook），它用于在函数组件中缓存回调函数，以避免在每次渲染时创建新的回调函数。

在 React 中，我们知道当函数组件重新渲染时，其内部的函数定义会被重新创建。如果你的组件包含了子组件，且给子组件传递了父组件中声明定义的函数，每次重新渲染都会导致子组件重新获取新的函数，可能会触发不必要的子组件更新。这种情况下，可以使用 useCallback 来缓存回调函数，确保它在依赖项不变的情况下保持稳定，从而避免子组件的不必要更新。

useCallback 接受两个参数：一个是回调函数，另一个是依赖项数组。

const memoizedCallback = useCallback(() => {
  // 在这里定义回调函数逻辑
  doSomething();
}, [dep1, dep2]);

在这个例子中，useCallback 接受一个回调函数作为第一个参数。这个函数是你希望缓存的回调函数。

第二个参数是依赖项数组，与 useMemo 的依赖项数组类似。只有当这个数组中的变量发生变化时，useCallback 才会重新创建新的回调函数。如果依赖项数组中的变量在两次渲染之间没有发生变化，React 将会跳过重新创建回调函数的步骤，并返回上一次缓存的回调函数。

使用 useCallback 的主要目的是优化子组件的渲染。通过缓存回调函数，可以确保子组件在父组件重新渲染时不会获取到新的回调函数，从而避免不必要的子组件更新。

需要注意的是，尽管 useCallback 可以优化性能，但并不是在所有情况下都需要使用。只有在确实需要避免不必要的子组件更新时，才建议使用 useCallback。在大多数情况下，React 的默认行为已经足够高效，不需要过度优化。