想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

这是 Web 性能优化的第四篇，之前的可以在下面点击查看：

1. @L_777_1@
2. Web 性能优化： 图片优化让网站大小减少 62%
3. Web 性能优化： 缓存 React 事件来提高性能

React.js 核心团队一直在努力使 React 变得更快，就像燃烧的速度一样。为了让开发者能够加速他们的 React 应用程序，为此增加了很多工具:

• SusPEnse 和 Lazy Load (React.lazy(…), <Suspense/>)
• 纯组件
• shouldcomponentUpdate(…){…} 生命周期钩子

在这篇文章中，我们将介绍 React v16.6 中新增的另一个优化技巧，以帮助加速我们的函数组件：React.memo。

提示:使用 Bit 共享和安装 React 组件。使用你的组件来构建新的应用程序，并与你的团队共享它们以更快地构建。

浪费的渲染

组件构成 React 中的一个视图单元。这些组件具有状态，此状态是组件的本地状态，当状态值因用户操作而更改时，组件知道何时重新渲染。现在，React 组件可以重新渲染 5、10 到 90次。有时这些重新渲染可能是必要的，但大多数情况下不是必需的，所以这些不必要的这将导致我们的应用程序严重减速，降低了性能。

来看看以下这个组件：

import React from 'react'

class TestC extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    }
  }

  componentWillUpdate(nextProps, nextState) {
    console.log('componentWillUpdate')
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate')
  }

  render () {
    return (
      <div>
        {this.state.count}
        <button onClick={ () => this.setState({count: 1})}>Click Me</button>
      </div>
    )
  }
}

export default TestC;

该组件的初始状态为 {count: 0} 。当我们单击 click Me 按钮时，它将 count 状态设置为 1。屏幕的 0 就变成了 1。.当我们再次单击该按钮时出现了问题，组件不应该重新呈现，因为状态没有更改。count 的上个值为1，新值也 1，因此不需要更新 DOM。

这里添加了两个生命周期方法来检测当我们两次设置相同的状态时组件 TestC 是否会更新。我添加了componentWillUpdate，当一个组件由于状态变化而确定要更新/重新渲染时，React 会调用这个方法;还添加了componentdidUpdate，当一个组件成功重新渲染时，React 会调用这个方法。

在浏览器中运行我们的程序，并多次单击 Click Me 按钮，会看到在控制打印很多次信息:

在我们的控制台中有 “componentWillUpdate” 和 “componentWillUpdate” 日志，这表明即使状态相同，我们的组件也在重新呈现，这称为浪费渲染。

纯组件/shouldComponentUpdate

为了避免 React 组件中的渲染浪费，我们将挂钩到 shouldComponentUpdate 生命周期方法。

shouldComponentUpdate 方法是一个生命周期方法，当 React 渲染 一个组件时，这个方法不会被调用 ，并根据返回值来判断是否要继续渲染组件。

假如有以下的 shouldComponentUpdadte:

shouldComponentUpdate (nextProps, nextState) {
  return true
}

• nextProps: 组件接收的下一个 props 值。
• nextState: 组件接收的下一个 state 值。

在上面，告诉 React 要渲染我们的组件，这是因为它返回 true。

如果我们这样写:

shouldComponentUpdate(nextProps, nextState) {
   return false
}

我们告诉 React 永远不要渲染组件，这是因为它返回 false。

因此，无论何时想要渲染组件，都必须返回 true。现在，可以重写 TestC 组件:

import React from 'react';
class TestC extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
    }
    componentWillUpdate(nextProps, nextState) {
        console.log('componentWillUpdate')
    }
    componentDidUpdate(prevProps, prevState) {
        console.log('componentDidUpdate')
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (this.state.count === nextState.count) {
            return false
        }
        return true
    }
    render() {
        return ( 
            <div> 
            { this.state.count } 
            <button onClick = {
                () => this.setState({ count: 1 }) }> Click Me </button> 
            </div>
        );
    }
}
export default TestC;

我们在 TestC 组件中添加了 shouldComponentUpdate，我们检查了当前状态对象this.state.count 中的计数值是否等于 === 到下一个状态 nextState.count 对象的计数值。 如果它们相等，则不应该重新渲染，因此我们返回 false，如果它们不相等则返回 true，因此应该重新渲染以显示新值。

在我们的浏览器中测试，我们看到我们的初始渲染:

如果我们多次点击 click Me 按钮，我们只会得到:

componentWillUpdate
componentDidUpdate 

我们可以从 React DevTools 选项卡中操作 TestC 组件的状态，单击 React 选项，选择右侧的 TestC，我们将看到带有值的计数状态：

在这里，我们可以改变数值，点击count文本，输入 2，然后回车:

@H_624_360@

你会看到状态计数增加到 2,在控制台会看到：

componentWillUpdate
componentDidUpdate
componentWillUpdate
componentDidUpdate

这是因为上个值为 1 且新值为 2，因此需要重新渲染。

现在，使用 纯组件。

React在v15.5中引入了Pure Components。 这启用了默认的相等性检查（更改检测）。 我们不必将 shouldComponentUpdate 生命周期方法添加到我们的组件以进行更改检测，我们只需要继承 React.PureComponent，React 将会自己判断是否需要重新渲染。

注意：@H_265_406@

1）继承 React.PureComponent 时，不能再重写 shouldComponentUpdate，否则会引发警告

Warning: ListOfWords has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

2）继承PureComponent时，进行的是浅比较，也就是说，如果是引用类型的数据，只会比较是不是同一个地址，而不会比较具体这个地址存的数据是否完全一致。

in(',')}

; } } class WordAdder extends React.Component { constructor(props) { super(props); this.state = { words: ['marklar'] }; this.handleClick = this.handleClick.bind(this); } handleClick() { // This section is bad style and causes a bug const words = this.state.words; words.push('marklar'); this.setState({words: words}); } render() { return (

click

); } } " title="" data-original-title="复制">