关于react.js:Reactmemo-解决了什么问题

React.memo 解决了什么问题?

• 原文地址 –DapanDocs：https://skillgroup.cn/framework/react/hooks/memo.html

React.memo 是 React 16.6 版本引入的一个新性能，它是一个高阶组件，旨在优化函数组件的性能。那么，它到底解决了什么问题呢？

React.memo 根底用法

问题：不必要的渲染

在 React 中，组件的从新渲染通常是因为状态或 props 的变动引起的。但有时，即便相干数据没有发生变化，组件也可能会进行不必要的渲染。这种不必要的渲染可能会导致性能降落，尤其是在简单的应用程序中。

<div ref=”memo1″ />

::: details demo 代码
<<< @/components/react/hooks/memo/BasicComponent.jsx
:::

在这个例子中，ParentComponent有一个状态 count，每当咱们点击按钮时，这个状态就会减少。因为 React 的工作形式，每次count 发生变化时，ParentComponent都会从新渲染。这也意味着 ChildComponent 也会从新渲染，只管传递给它的text prop 并没有产生任何变动。

这就是一个不必要的渲染的例子。每次 ParentComponent 的状态发生变化时，ChildComponent都会进行不必要的渲染，即便它接管的 props 完全相同。

这种状况在大型应用程序中可能会变得更加重大，因为不必要的渲染可能会在多个组件之间产生连锁反应，导致整个应用程序的性能降落。

解决方案：浅比拟 props

React.memo 的工作原理是对组件的 props 进行浅比拟。如果传递给组件的 props 没有发生变化，React.memo 会复用上一次的渲染后果，从而防止不必要的渲染。

<div ref=”memo2″ />

::: details demo 代码
<<< @/components/react/hooks/memo/MemoizedComponent.jsx
:::

在上述例子中，即便 ParentComponent 从新渲染（例如，因为 count 状态的变动），因为传递给 MemoizedChildComponent 的 text prop 没有发生变化，ChildComponent 不会从新渲染。如果咱们没有应用 React.memo，每次点击按钮时，ChildComponent 都会从新渲染，即便其 props 没有发生变化。

自定义比拟函数

React.memo 的第二个参数是一个比拟函数，它容许咱们自定义比拟 props 的逻辑。如果咱们传递了一个比拟函数，React.memo 将应用它来决定是否从新渲染组件，而不是简略地应用浅比拟。

举例说明：

假如咱们有一个 User 组件，它承受一个 user 对象和一个 onUpdate 函数作为 props。咱们只关怀 user 对象中的 id 和 name 字段，而不关怀其余字段。此外，咱们晓得 onUpdate 函数的援用可能会常常扭转，但它的理论性能不会扭转。

在这种状况下，咱们能够应用 React.memo 的第二个参数来提供一个自定义的比拟函数：

const areEqual = (prevProps, nextProps) => {
  // 查看 user 对象中的 id 和 name 字段是否雷同
  return (
    prevProps.user.id === nextProps.user.id &&
    prevProps.user.name === nextProps.user.name
  );
};

const User = React.memo(({user, onUpdate}) => {// 组件逻辑}, areEqual);

在上述例子中，即便 onUpdate 函数的援用或 user 对象中的其余字段发生变化，只有 id 和 name 字段放弃不变，User 组件就不会从新渲染。

总之，React.memo 的第二个参数提供了弱小的自定义比拟逻辑，使咱们可能更准确地管制组件的从新渲染行为。

注意事项

传递函数给子组件

当父组件从新渲染时，如果它向子组件传递一个函数，并且这个函数是在父组件的 render 办法或函数组件的主体中定义的，那么每次父组件从新渲染时，这个函数都会被从新创立。这意味着从技术上讲，这个函数在每次渲染时都是创立一个新的函数，即便它的理论性能没有变动。

React.memo 通过浅比拟 props 来防止不必要的从新渲染。然而，因为每次都是一个新的函数实例，浅比拟会认为函数曾经扭转，从而导致子组件从新渲染。

<div ref=”memo3″ />

::: details demo 代码
<<< @/components/react/hooks/memo/FunctionInProps.jsx
:::

在上述案例中，咱们察看到以下状况：

当点击 Increment 按钮时，父组件的状态 count 发生变化，导致父组件从新渲染。因为父组件从新渲染，getText 函数也会被从新创立。

因为应用了 memo 对 ChildComponent 进行了包裹，MemoizedChildComponent 会进行浅比拟以决定是否从新渲染。因为 getText 函数在每次渲染时都是一个新的实例，浅比拟会认为该函数产生了变动，因而会触发子组件的从新渲染。

解决方案

常见的三种解决方案如下:

1、将函数移至组件内部

如果函数不依赖于组件的 props 或 state，您能够将其移至组件内部，这样它就不会在每次渲染时从新创立。

<div ref=”memo4″ />

::: details demo 代码
<<< @/components/react/hooks/memo/FunctionInProps2.jsx
:::

2、应用类组件的办法

如果您应用的是类组件，能够将函数作为类的办法，这样它的援用在从新渲染之间就会放弃不变。

<div ref=”memo5″ />

::: details demo 代码
<<< @/components/react/hooks/memo/FunctionInProps3.jsx
:::

3、应用 useCallback

如果您应用的是函数组件，能够应用 useCallback Hook 来确保函数的援用在从新渲染之间放弃不变。

<div ref=”memo6″ />

::: details demo 代码
<<< @/components/react/hooks/memo/FunctionInProps4.jsx
:::

在下面的案例中，只有当依赖列表中的值发生变化时，getText 函数才会被从新创立。

传递对象 / 数组给子组件

当父组件从新渲染时，如果它向子组件传递一个对象，并且这个对象是在父组件的 render 办法或函数组件的主体中定义的，那么每次父组件从新渲染时，这个对象都会被从新创立。这意味着从技术上讲，这个对象在每次渲染时都是创立一个新的对象，即便它的理论性能没有变动。

React.memo 通过浅比拟 props 来防止不必要的从新渲染。然而，因为每次都是一个新的对象，浅比拟会认为对象曾经扭转，从而导致子组件从新渲染。

<div ref=”memo7″ />

::: details demo 代码
<<< @/components/react/hooks/memo/ObjectInProps.jsx
:::

解决方案

常见的三种解决方案如下:

1、将对象移至组件内部

如果对象不依赖于组件的 props 或 state，您能够将其移至组件内部，这样它就不会在每次渲染时从新创立。

<div ref=”memo8″ />

::: details demo 代码
<<< @/components/react/hooks/memo/ObjectInProps1.jsx
:::

2、应用 useState 或 useRef 来存储对象

如果您的对象不常常变动，能够应用 useState 或 useRef 来存储它，这样它的援用在从新渲染之间就会放弃不变。

<div ref=”memo9″ />

::: details demo 代码
<<< @/components/react/hooks/memo/ObjectInProps2.jsx
:::

3、应用 useMemo

在某些状况下，咱们心愿组件的某些属性发生变化时，组件不会从新渲染。这时，咱们能够应用 useMemo 来返回组件的 memoized 值，从而防止组件的从新渲染。

<div ref=”memo10″ />

::: details demo 代码
<<< @/components/react/hooks/memo/ObjectInProps3.jsx
:::

在下面的代码中，userInfo 只会在组件首次渲染时创立，除非依赖列表中的值发生变化。

调用 React.memo 后大抵执行状况

graph TD
  A[React.memo] --> B[这是函数组件吗? isValidElementType 函数判断组件类型 type]
  B -->| 是 | C[用 MemoComponent 包装]
  B -->| 否 | D[抛出谬误 console.error]
  C --> E[父组件渲染]
  E --> F[父组件传递 nextProps 给子组件]
  F --> G[获取 workInProgress.memoizedProps]
  G --> H[自定义比拟函数? compare 函数有两个形参: oldProps newProps]
  H -->| 是 | I[应用自定义比拟函数比拟]
  H -->| 否 | J[浅比拟 memoizedProps 和 nextProps]
  I -->| 雷同 | K[跳过渲染并返回上次的后果]
  I -->| 不同 | L[渲染并返回]
  J -->| 雷同 | K
  J -->| 不同 | L