21 个 React 性能优化技巧

React 为高性能应用设计提供了许多优化方案，本文列举了其中的一些最佳实践。

在以下场景中，父组件和子组件通常会重新渲染：

1. 在同一组件或父组件中调用 setState 时。

2. 从父级收到的“props”的值发生变化。

3. 调用组件中的 forceUpdate。

下面是提升 React 应用性能的 21 个技巧。

1. 使用纯组件

image

如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。

对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 React.PureComponent 类的类组件被视为纯组件。

它与普通组件是一样的，只是 PureComponents 负责 shouldComponentUpdate——它对状态和 props 数据进行浅层比较（shallow comparison）。

如果先前的状态和 props 数据与下一个 props 或状态相同，则组件不会重新渲染。

什么是浅层渲染？

在对比先前的 props 和状态与下一个 props 和状态时，浅层比较将检查它们的基元是否有相同的值（例如：1 等于 1 或真等于真），还会检查更复杂的 JavaScript 值（如对象和数组）之间的引用是否相同。

比较基元和对象引用的开销比更新组件视图要低。

因此，查找状态和 props 值的变化会比不必要的更新更快。

复制代码

import React from 'react'; export default class ApplicationComponent extends React.Component {     constructor() {        super();        this.state = {            name: "Mayank"        }    }     updateState = () => {        setInterval(() => {            this.setState({                name: "Mayank"            })        }, 1000)    }     componentDidMount() {        this.updateState();    }     render() {         console.log("Render Called Again")        return (            
                                            
        )    }} class RegularChildComponent extends React.Component {    render() {        console.log("Regular Component Rendered..");        return 
{this.props.name}
;    }} class PureChildComponent extends React.PureComponent {        // Pure Components are the components that do not re-render if the State data or props data is still the same           render() {        console.log("Pure Component Rendered..")        return 
{this.props.name}
;    }}

在上面的示例中，状态被传播到子组件 RegularChildComponent 和 PureChildComponent。PureChildComponent 是一个纯组件。

setstate 在一秒的间隔之后被调用，这将重新触发组件的视图渲染。由于初始 props 和新 props 的值相同，因此组件（PureChildComponent）不会被重新渲染。

状态的浅层比较表明 props 或状态的数据没有变化，因此不需要渲染组件，从而提升了性能。

2. 使用 React.memo 进行组件记忆

React.memo 是一个高阶组件。

它很像 PureComponent，但 PureComponent 属于 Component 的类实现，而“memo”则用于创建函数组件。

这里与纯组件类似，如果输入 props 相同则跳过组件渲染，从而提升组件性能。

它会记忆上次某个输入 prop 的执行输出并提升应用性能。即使在这些组件中比较也是浅层的。

你还可以为这个组件传递自定义比较逻辑。

用户可以用自定义逻辑深度对比（deep comparison）对象。如果比较函数返回 false 则重新渲染组件，否则就不会重新渲染。

复制代码

function CustomisedComponen(props) {    return (        
            User name: {props.name}            User age: {props.age}            User designation: {props.designation}        
    )} // The component below is the optimised version for the Default Componenent // The Component will not re-render if same props value for "name" property  var memoComponent = React.memo(CustomisedComponent);

上面的组件将对前后两个 props 的值进行浅层比较。

如果我们将对象引用作为 props 传递给 memo 组件，则需要一些自定义登录以进行比较。在这种情况下，我们可以将比较函数作为第二个参数传递给 React.memo 函数。

假设 props 值（user）是一个对象引用，包含特定用户的 name、age 和 designation。

这种情况下需要进行深入比较。我们可以创建一个自定义函数，查找前后两个 props 值的 name、age 和 designation 的值，如果它们不相同则返回 false。

这样，即使我们将参考数据作为 memo 组件的输入，组件也不会重新渲染。

复制代码

// The following function takes "user" Object as input parameter in props function CustomisedComponen(props) {    return (        
            User name: {props.user.name}            User age: {props.user.age}            User designation: {props.user.designation}        
    )} function userComparator(previosProps, nextProps) {    if(previosProps.user.name == nextProps.user.name ||       previosProps.user.age == nextProps.user.age ||       previosProps.user.designation == nextProps.user.designation) {        return false    } else {        return true;    }} var memoComponent = React.memo(CustomisedComponent, userComparator);

上面的代码提供了用于比较的自定义逻辑

3. 使用 shouldComponentUpdate 生命周期事件

这是在重新渲染组件之前触发的其中一个生命周期事件。

可以利用此事件来决定何时需要重新渲染组件。如果组件 props 更改或调用 setState，则此函数返回一个 Boolean 值。

在这两种情况下组件都会重新渲染。我们可以在这个生命周期事件中放置一个自定义逻辑，以决定是否调用组件的 render 函数。

这个函数将 nextState 和 nextProps 作为输入，并可将其与当前 props 和状态做对比，以决定是否需要重新渲染。

比如说我想在网页上显示员工的详细资料。每位员工都包含多个属性，如姓名、年龄、牌号、薪水、当前经理、前任经理、奖金等。

我想只在网页上渲染所选员工的姓名和年龄。员工的牌号会在某时刻更新。

由于员工牌号不在视图内，理想情况下视图是无需更新的。我们可以在组件中添加自定义逻辑，判断是否需要组件更新视图。

代码如下：

复制代码

import React from "react"; export default class ShouldComponentUpdateUsage extends React.Component {   constructor(props) {    super(props);    this.state = {      name: "Mayank";      age: 30,      designation: "Architect";    }  }    componentDidMount() {    setTimeout(() => {      this.setState({        designation: "Senior Architect"      });    }  }                 shouldComponentUpdate(nextProps, nextState) {      if(nextState.age != this.state.age || netState.name = this.state.name) {        return true;      }      return false;  }    render() {    return (      
        User Name: {this.state.name}        User Age: {this.state.age}      
    )  }}

这里即使组件中 designation 发生变化也不会影响应用的视图。

调用 setState 时组件会重新渲染，但因为 designation 更改不会改变 / 影响组件的视图，因此在更改 designation 时重新渲染组件会带来额外开销。

为了避免这种开销，我们可以使用自定义逻辑来检查 name 或 age 是否更新，因为视图仅受它们的影响。

shouldComponentUpdate 将输入参数作为状态和 props 的新值。

我们可以比较 name 和 age 的当前值和新值。有任何一个发生变化就可以触发重新渲染。

从 shouldComponentUpdate 传递 true 就意味着可以重新渲染组件，反之亦然。所以正确使用 shouldComponentUpdate 就可以优化应用组件的性能。

对比过初始状态和 props 后我们就可以决定是否需要重新渲染组件。这样可以减少重新渲染的需求来提升性能。

4. 懒加载组件

导入多个文件合并到一个文件中的过程叫打包，使应用不必导入大量外部文件。

所有主要组件和外部依赖项都合并为一个文件，通过网络传送出去以启动并运行 Web 应用。

这样可以节省大量网络调用，但这个文件会变得很大，消耗大量网络带宽。

应用需要等待这个文件的加载和执行，所以传输延迟会带来严重的影响。

为了解决这个问题，我们引入代码拆分的概念。

像 webpack 这样的打包器支持就支持代码拆分，它可以为应用创建多个包，并在运行时动态加载，减少初始包的大小。

为此我们使用 Suspense 和 lazy。

复制代码

import React, { lazy, Suspense } from "react"; export default class CallingLazyComponents extends React.Component {  render() {        var ComponentToLazyLoad = null;        if(this.props.name == "Mayank") {       ComponentToLazyLoad = lazy(() => import("./mayankComponent"));    } else if(this.props.name == "Anshul") {      ComponentToLazyLoad = lazy(() => import("./anshulComponent"));    }    return (        
            
This is the Base User: {this.state.name}
            Loading...
}>                                    

) }}

上面的代码中有一个条件语句，它查找 props 值，并根据指定的条件加载主组件中的两个组件。

我们可以按需懒惰加载这些拆分出来的组件，增强应用的整体性能。

假设有两个组件 WelcomeComponent 或 GuestComponents，我们根据用户是否登录而渲染其中一个。

我们可以根据具体的条件延迟组件加载，无需一开始就加载两个组件。

复制代码

import React, { lazy, Suspense } from "react"; export default class UserSalutation extends React.Component {     render() {        if(this.props.username !== "") {          const WelcomeComponent = lazy(() => import("./welcomeComponent"));          return (              
                  Loading...
}>                                                      

) } else { const GuestComponent = lazy(() => import("./guestComponent")); return (

Loading...

}>