React.memo

哚啦A孟

已于 2023-06-30 14:30:03 修改

阅读量6.8k

点赞数 2

分类专栏： React 文章标签： react.js 前端前端框架

于 2023-06-30 13:52:10 首次发布

本文链接：https://blog.csdn.net/linfeng_meng/article/details/131473320

版权

React 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

前言

什么是react的memo，简单来说就是父组件改变时，子组件也会跟着重新渲染（子组件没有用父组件改变了的值），这时我们就要利用memo规避一些无用的页面渲染。

我们可以通过三种方式规避一些无用的渲染：

类组件的两种方式：
shouldComponentUpdate
PureComponnet
函数组件的一种方式：
memo

memo(Component, arePropsEqual?)
参数
Component：要进行记忆化的组件。memo
不会修改该组件，而是返回一个新的、记忆化的组件。它接受任何有效的 React 组件，包括函数组件和 forwardRef 组件。

可选参数 arePropsEqual：一个函数，接受两个参数：组件的前一个 props 和新的 props。如果旧的和新的 props相等，即组件使用新的 props 渲染的输出和表现与旧的 props 完全相同，则它应该返回 true。否则返回 false。通常情况下，你不需要指定此函数。默认情况下，React 将使用 Object.is 比较每个 prop。

用法

React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。

默认情况下其只会对复杂对象做浅层对比，如果你想要控制对比过程，那么请将自定义的比较函数通过第二个参数传入来实现。

当 props 没有改变时跳过重新渲染

在此示例中，请注意 Greeting 组件在 name 更改时重新渲染（因为那是它的 props 之一），但是在 address 更改时不会重新渲染（因为它不作为 props 传递给 Greeting）

import { memo, useState } from 'react';

export default function MyApp() {
  const [name, setName] = useState('');
  const [address, setAddress] = useState('');
  return (
    <>
      <label>
        Name{': '}
        <input value={name} onChange={e => setName(e.target.value)} />
      </label>
      <label>
        Address{': '}
        <input value={address} onChange={e => setAddress(e.target.value)} />
      </label>
      <Greeting name={name} />
    </>
  );
}

const Greeting = memo(function Greeting({ name }) {
  console.log("Greeting was rendered at", new Date().toLocaleTimeString());
  return <h3>Hello{name && ', '}{name}!</h3>;
});

最小化 props 的变化

当你使用 memo 时，只要任何一个 prop 与先前的值不是浅层相等的话，你的组件就会重新渲染。这意味着 React 会使用 Object.is 比较组件中的每个 prop 与其先前的值。注意，Object.is(3, 3) 为 true，但 Object.is({}, {}) 为 false。

为了最大化使用 memo 的效果，应该尽量减少 props 的变化次数。例如，如果 props 是一个对象，可以使用 useMemo 避免父组件每次都重新创建该对象：

function Page() {
  const [name, setName] = useState('Taylor');
  const [age, setAge] = useState(42);

  const person = useMemo(
    () => ({ name, age }),
    [name, age]
  );

  return <Profile person={person} />;
}

const Profile = memo(function Profile({ person }) {
  // ...
});

指定自定义比较函数

在极少数情况下，最小化 memoized 组件的 props 更改可能是不可行的。在这种情况下，你可以提供一个自定义比较函数，React 将使用它来比较旧的和新的 props，而不是使用浅比较。这个函数作为 memo 的第二个参数传递。它应该仅在新的 props 与旧的 props 具有相同的输出时返回 true；否则应该返回 false。

function Child({value}){
    console.log('I am rendering');
    return (
        <div>{value}</div>
    )
};

function areEqual(prevProps, nextProps) {
    if(prevProps.value===nextProps.value){
        return true
    }else {
        return false
    }
}
export default React.memo(Child,areEqual)