React性能优化

sym001
287 阅读8分钟

本篇重点总结React高级用法之性能优化，性能优化方案，说出来可能有很多，但是哪些是所有前端项目、框架都需要做的。如：

  • 代码分割，代码压缩，使用生产版本的代码等（前端框架都需要，通用方法）
  • 渲染列表时合理使用key
  • 缓存组件

React在性能优化方面，有一个特色就是如何避免无效渲染

一、解释shouldComponentUpdate（SCU）

shouldComponentUpdata是React生命周期函数之一，它的作用时控制组件是否需要重新渲染。当组件的state或props发生变化时，React会自动调用shouldComponentUpdate方法，如果该方法返回true，则组件会重新渲染，反之则不会重新渲染。

在shouldComponentUpdate中，我们可以通过比较组件当前的state和props和下一个state和props来决定是否需要重新渲染。如果我们发现下一个state和props与当前的state和props相同，则可以返回false，避免不必要的重新渲染，提高性能。

需要注意的是，shouldComponentUpdate是一个有副作用的函数，如果我们在该函数中进行了异步操作或者对props和state进行了修改，则可能会导致不可预料的结果。因此，我们应该遵循React的更新机制，不要在shouldComponentUpdate中进行副作用操作。

二、解释PureComponent和React.memo

1、PureComponent

PureComponent是React中的一个组件类，它继承自Component，并且实现了shouldComponentUpdate方法。与Component不同的是，PureComponent会对组件的props和state进行浅比较，如果发现它们与上一次的值相同，则不会进行重新渲染。

使用PureComponent可以提高React应用的性能，因为它避免了不必要的重新渲染。但是需要注意的是，PureComponent的浅比较可能会导致一些问题，例如当props或state中包含复杂对象或数组时，浅比较可能会误判为相同，从而导致组件没有正确地更新。

2、React.memo

React.memo是React中的一个高阶组件，它可以用来优化函数组件的性能。React.memo会对函数组件的props进行浅比较，如果发现props与上一次的值相同，则不会进行重新渲染。

使用React.memo可以避免不必要的重新渲染，提高React应用的性能。但是需要注意的是，React.memo的浅比较可能会导致一些问题，例如当props中包含复杂对象或数组时，浅比较可能会误判为相同，从而导致组件没有正确地更新。例如：

import React from 'react';

function MyComponent(props) {
  /* 使用 props 渲染组件 */
}

function propsAreEqual(prevProps, nextProps) {
  /* 自定义比较函数 */
}

export default React.memo(MyComponent, propsAreEqual);

在上面的代码中，我们定义了一个自定义的比较函数propsAreEqual，并将它作为React.memo的第二个参数传入。这样，React.memo会使用propsAreEqual来比较前后两次渲染的props是否相等，从而避免不必要的重新渲染。

因此，在使用React.memo时，我们需要确保props是不可变的，或者使用深比较来确保正确的更新。另外，对于需要进行异步操作或副作用操作的组件，我们应该避免使用React.memo。

需要注意的是，React.memo只适用于纯函数组件，如果函数组件内部包含了状态、生命周期方法或ref等特殊的React特性，则React.memo将不起作用。此时，我们可以考虑使用类组件或hooks来实现相应的功能。

三、不可变值 immutable.js

Immutable.js是一个JavaScript库，它提供了一套API来创建和操作不可变值。它的主要特点是简单易用、性能优异、API丰富、可扩展性强等。

在React中使用Immutable.js有以下优势：

  1. 简化状态管理：使用Immutable.js可以让我们更方便地创建和操作不可变值，从而简化状态管理。我们可以使用Immutable.js提供的API来创建和修改不可变值，而不需要手动管理状态的引用和副本，从而减少了出错的可能性。

  2. 提高性能：使用Immutable.js可以避免因为修改状态而引起的性能问题。由于React在比较前后状态时，会比较新旧两个状态的引用是否相等，如果相等，则认为状态没有变化，不需要重新渲染组件。而使用Immutable.js可以确保状态的引用不会发生变化，从而避免不必要的重新渲染。

  3. 支持高级数据结构：Immutable.js提供了一些高级的数据结构，如List、Map、Set等，可以方便地处理复杂的数据结构。这些数据结构不仅可以提高代码的可读性和可维护性，还可以提高代码的性能和效率。

  4. 更好的类型检查：使用Immutable.js可以让我们更方便地进行类型检查。由于Immutable.js提供了一套严格的类型系统，可以确保数据的类型正确，从而减少了出错的可能性。

总之，使用Immutable.js可以让我们更方便地管理状态，提高性能，支持高级数据结构，以及更好的类型检查。这些优势使得Immutable.js成为React中不可或缺的库之一。

四、高阶组件（HOC）

高阶组件（Higher-Order Component，简称HOC）是React中一个非常重要的概念，它是一个函数，接收一个组件作为参数并返回一个新的组件。HOC可以用来增强组件的功能，例如添加一些通用的逻辑、封装一些重复的代码、注入一些共享的数据等等。

HOC的基本用法如下：

function withSomeFeature(WrappedComponent) {
  return function WithSomeFeature(props) {
    // 在这里可以添加一些通用的逻辑
    return <WrappedComponent {...props} />;
  };
}

在上面的代码中，我们定义了一个名为withSomeFeature的HOC，它接收一个组件WrappedComponent作为参数，并返回一个新的组件WithSomeFeature。在WithSomeFeature中，我们可以添加一些通用的逻辑，然后将props传递给WrappedComponent。

使用HOC的方式如下：

const EnhancedComponent = withSomeFeature(MyComponent);

在上面的代码中，我们使用withSomeFeature来增强MyComponent组件的功能，并将增强后的组件赋值给EnhancedComponent。此时，EnhancedComponent已经包含了withSomeFeature中定义的通用逻辑。

需要注意的是，HOC也可以嵌套使用，例如：

const EnhancedComponent = withSomeFeature(withAnotherFeature(MyComponent));

在上面的代码中，我们先使用withAnotherFeature来增强MyComponent组件的功能，然后再使用withSomeFeature来增强增强后的组件的功能。最终得到的EnhancedComponent已经包含了withSomeFeature和withAnotherFeature中定义的通用逻辑。

redux 的 connect 就是一个高阶组件

应用如下:

import { connect } from 'react-redux'

// connect 是高阶组件
const VisibleTodoList = connect(
    mapStateToProps,
    mapDispatchToProps
)(TodoList)

export default VisibleTodoList

connect 源码结构如下

  • connect 接收 mapStateToProps 和 mapDispatchToProps ，返回一个函数
  • 该函数是一个高阶组件，接收 WrappedComponent ，返回新组件
export const connect = (mapStateToProps, mapDispatchToProps) => (WrappedComponent) => {
  class Connect extends Component {
    constructor () {
      super()
      this.state = {
        allProps: {}
      }
    }

    /* 中间省略 N 行代码 */

    render () {
      return <WrappedComponent {...this.state.allProps} />
    }
  }
  return Connect
}

五、Render porps

在 React 中，render prop 是一种模式，它通过将一个函数作为组件的 props 来实现组件之间的代码重用。这个函数被称为 render prop，它接收一些参数并返回一个 React 元素。

使用 render prop 模式的组件通常会将一些状态或行为作为参数传递给 render prop 函数。这些参数可以是任何类型的，包括函数、对象、数组等等。render prop 函数可以使用这些参数来生成需要渲染的元素。

一个常见的例子是 Tooltip 组件。Tooltip 组件需要在鼠标悬停或点击某个元素时显示一个提示框。使用 render prop 模式，我们可以将提示框的内容作为参数传递给 Tooltip 组件的 render prop 函数。当需要显示提示框时，Tooltip 组件会调用 render prop 函数，并将提示框的内容作为参数传递给它。render prop 函数可以使用这个参数来生成需要渲染的提示框元素。

以下是一个简单的 Tooltip 组件的例子：

class Tooltip extends React.Component {
  state = { show: false };

  handleMouseOver = () => {
    this.setState({ show: true });
  };

  handleMouseOut = () => {
    this.setState({ show: false });
  };

  render() {
    const { text, children } = this.props;
    const { show } = this.state;

    return (
      <div onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
        {children}
        {show && (
          <div style={{ position: 'absolute', backgroundColor: 'gray', padding: '5px' }}>
            {text}
          </div>
        )}
      </div>
    );
  }
}

<Tooltip text="Tooltip text">
  <button>Hover me</button>
</Tooltip>

在上面的例子中，Tooltip 组件接收一个 text 属性和一个 children 属性。children 属性是一个函数，它接收一个 show 参数并返回一个 React 元素。当鼠标悬停在按钮上时，Tooltip 组件会将 show 参数设置为 true，并调用 children 函数，从而显示提示框。

render prop 模式可以让组件更加灵活和可重用，它可以帮助我们避免组件之间的代码重复。

六、HOC和Render props的对比

高阶组件（HOC）和渲染属性（Render Props）都是React中常用的组件复用模式，它们的主要区别在于实现方式和使用方式。

HOC是一个函数，它接收一个组件作为参数，并返回一个新的组件。这个新的组件可以包装原始组件，增加一些新的功能或属性。HOC的好处在于它可以让你在不修改原始组件的情况下，动态地添加或删除功能。但是使用HOC也有一些缺点，比如会产生嵌套过深的问题，以及可能会导致命名冲突等问题。

渲染属性是一种组件复用模式，它通过一个函数作为组件的props来实现。这个函数接收组件的状态和方法作为参数，并返回一个React元素。使用渲染属性的好处在于它可以让你更加灵活地复用组件逻辑，因为这个函数可以接收任意类型的参数。但是使用渲染属性也有一些缺点，比如需要在组件中定义额外的props，以及可能会导致代码冗余的问题。

总的来说，HOC和渲染属性都是非常有用的组件复用模式，具体选择哪种方式取决于你的具体需求和项目的架构。

avatar
文章
阅读
粉丝