详解使用React.memo()来优化函数组件的性能(2)

日期：2020-12-09 栏目：程序人生浏览：次

那么如何验证后面state的值发生改变，组件还是会被重新渲染呢？我们可以在浏览器的React DevTools插件中直接对TestC组件的状态进行更改。具体做法是, 在Chrome调试工具中点击React标签，在界面左边选中TestC组件，在界面的右边就可以看到其状态state中只有一个键count，且其值是1:

详解使用React.memo()来优化函数组件的性能

然后让我们点击count的值1，将其修改为2，然后按回车键:

详解使用React.memo()来优化函数组件的性能

你将会看到控制台有以下输出:

componentWillUpdate
componentDidUpdate
componentWillUpdate
componentDidUpdate

state的count被改变了，组件也被重新渲染了。

现在让我们使用另外一种方法PureComponent来对组件进行优化。

React在v15.5的时候引入了Pure Component组件。React在进行组件更新时，如果发现这个组件是一个PureComponent，它会将组件现在的state和props和其下一个state和props进行浅比较，如果它们的值没有变化，就不会进行更新。要想让你的组件成为Pure Component，只需要extends React.PureComponent即可。

让我们用PureComponent去改写一下我们的代码吧:

import React from 'react'; class TestC extends React.PureComponent { 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;

在上面的代码中，我将shouldComponentUpdate的代码注释掉了，因为React.PureComponent本身就帮我们实现了一样的功能。

改完代码后，我们刷新一下浏览器，然后多次点击Click Me按钮看组件被渲染了多少遍:

详解使用React.memo()来优化函数组件的性能

由上面的输出可知，我们的component只在state由0变为1时被重新渲染了，后面都没有进行渲染。

函数组件

上面我们探讨了如何使用PureComponent和shouldComponentUpdate的方法优化类组件的性能。虽然类组件是React应用的主要组成部分，不过函数组件(Functional Component)同样可以被作为React组件使用。

function TestC(props) { return ( <div> I am a functional component </div> ) }

对于函数组件，它们没有诸如state的东西去保存它们本地的状态(虽然在React Hooks中函数组件可以使用useState去使用状态), 所以我们不能像在类组件中使用shouldComponentUpdate等生命函数去控制函数组件的重渲染。当然，我们也不能使用extends React.PureComponent了，因为它压根就不是一个类。

要探讨解决方案，让我们先验证一下函数组件是不是也有和类组件一样的无用渲染的问题。

首先我们先将ES6的TestC类转换为一个函数组件:

import React from 'react'; const TestC = (props) => { console.log(`Rendering TestC :` props) return ( <div> {props.count} </div> ) } export default TestC; // App.js <TestC count={5} />

当上面的代码初次加载时，控制台的输出是:

详解使用React.memo()来优化函数组件的性能