【React】通过使用React.memo来改善显示性能

1 年 ago

韵, 科

2 minutes

以前我总结了使用代码分割来改善React的显示性能。现在，我对React.memo对显示的影响进行了验证，并整理了相关内容。

React.memo是什么

React.memo是一个高阶组件（接受一个组件并返回一个新组件的函数）。

当给予某个组件相同的props并渲染相同的结果时，可以通过将该组件包装在React.memo中来记忆结果。通过重用React所存储的渲染结果，可以提高显示性能。

然而，React.memo只是用于性能优化的方法，不推荐将其用于“阻止渲染”。
由于可能引发错误，最好不要滥用它。

顺便提一下，在Class组件中实现类似的功能，可以使用React.PureComponent或shouldComponentUpdate()这两个生命周期方法。

验证

创建应用程序。

我要创建一个名为App的组件，它是Person组件的父组件。
根据showPerson的状态（true/false），切换Person的显示。

import React, useState from 'react';
import logo from './logo.svg';
import './App.css';

import Person from './person.component';

const App = () => {

  const initialState = {
    count: 0,
    person: { name: 'Jack', age: 22 },
    showPerson: false,
  }

  const [state, setState] = useState(initialState)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        {state.showPerson ? <Person person={state.person} /> : null}
        Button Count: {state.count}
        <button
          onClick={() =>
            setState((prevState) => ({
              ...prevState,
              count: prevState.count + 1,
            }))
          }
        >
          Increase Count
        </button>
        <button
          onClick={() =>
            setState((prevState) => ({
              ...prevState,
              showPerson: !prevState.showPerson,
            }))
          }
        >
          Toggle Person
        </button>
      </header>
    </div>
  );
}

export default App;

生成Person

我要创建一个人组件。

未使用React.memo。

执行常规默认导出。

import React from 'react';

const Person = ({ person }) => {
  console.log('rendering');

  return (
    <div>
      <p>{person.name}</p>
      <p>{person.age}</p>
    </div>
  );
};

export default Person;

React.memo的使用

在导出Person时，使用React.memo进行包装。

import React from 'react';

const Person = ({ person }) => {
  console.log('rendering');

  return (
    <div>
      <p>{person.name}</p>
      <p>{person.age}</p>
    </div>
  );
};

export default React.memo(Person);