「React 基础」组件生命周期函数shouldComponentUpdate()介绍

原创

前端达人

修改于 2020-02-21 09:34:28

5360

修改于 2020-02-21 09:34:28

大家好，在「React 手册」组件生命周期相关函数——componentWillMount 和「React 手册」组件生命周期函数——componentDidMount 介绍这两篇文章里，我们通过实例的形式学习了 componentWillMount 和 componentDidMount 这两个生命周期周期函数，本篇文章我们将通过一个虚拟币兑换的例子学习下另外一个重要的函数shouldComponentUpdate。

首先看看我们应用长啥样

大家都应该知道虚拟货币比特币吧，如果你入手早的话，那就发大了。今天我们来做一个美元购买比特币的小应用，用户输入美金金额，系统会告知能兑换多少虚拟比特币，我们的例子如下图所示：

开始创建虚拟货币兑换应用

1、在基于前面几篇文章项目的基础上，我们在 Components 目录下新建 Coins 文件夹，然后新建 Coins.js 和 Coins.css 文件。

2、我们这个兑换应用，用户只能购买整数倍的比特币，假设10美金能兑换1个比特币，我们必须要求用户输入的金额必须是10美金的整数倍，这样才能提供服务。由于 Coins.js 的代码比较简单，我就不分步讲解了，让我整体来看下代码，示例代码如下：

import React,{ Component } from "react";
import './Coins.css';

class Coins extends Component {
    constructor() {
        super();
        this.state ={
            dollars: 0
        };
    };

    shouldComponentUpdate(props,state) {
        return  state.dollars % 10 === 0;
    };

    handleOnChange = e => {
        this.setState({
            dollars:Number(e.target.value || 0)
        });
    };

    render() {
        return (
            <div className="Coins">
                <h1> Buy Crypto Coins! </h1>

                <div className="question">
                    <p>How much dollars do you have?</p>
                    <p>
                        <input
                        placeholder="0"
                        onChange={this.handleOnChange}
                        type="text"
                        />
                    </p>
                </div>

                <div className="answer">
                    <p> Crypto Coins price: $10 </p>
                    <p>
                        you can  buy <strong>
                        {this.state.dollars / 10}
                    </strong> coins.
                    </p>
                </div>

            </div>
        );
    }
}
export default  Coins;

3、你可能会认为，只要用户在输入框输入内容，我们就会更新 state.dollars 的数据状态，但是你运行上述代码，你将会发现你输入的数字小于10时，界面的提示信息不会发生改变，一直提示你只能兑换0个比特币。如果你输入为10的整数倍时，界面的提示信息才会发生变化。

4、之所以会这样，是因为我们应用到了生命周期函数shouldComponentUpdate，此方法是我们提高程序性能的重要方法之一。每次我们更新本地状态时，它都会接收两个参数（props, state），执行这个生命周期函数的逻辑。

这个函数的返回值必须是布尔值，默认返回ture，返回false时不会重写render，如果你这样更改代码，我们的组件状态将永远无法更新。

shouldComponentUpdate(props, state) {
  return false;
}

5、如果你不定义这个方法，或者一直返回True, React 的默认行为是始终更新组件的，当我们加载大量的数据时，性能问题就会暴露出来。

6、好了，我们一起来看看应用运行的效果，在我们的示例中，当我们输入的内容为10的整数倍时，shouldComponentUpdate()返回true，触发了数据状态的更新和界面的渲染，这也是我们能看到组件更新的原因，如下图所示：

7、当我们输入非10的整数倍时，我们应用的界面将不会发生任何变化，如下图所示：

8、现在我们把 shouldComponentUpdate() 删掉或者把方法的返回值改成True，我们在输入框随意输入都会触发我们界面的更新，如下图所示：

9、通过自己的亲自实践后，想必你加深了对 shouldComponentUpdate() 生命周期函数的理解，通过此函数我们能控制组件更新的时机，大大提高了程序的性能，最后附上组件的 CSS 代码，如下所示：

.Coins {
    background-color: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #e3e3e3 ;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
    margin-bottom: 20px;
    margin: 50px auto;
    min-height: 20px;
    padding: 19px;
    text-align: left;
    width: 70%;
}

.Coins input {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: inset 0  1px 1px rgba(0,0,0,.075);
    color: #555;
    font-size: 14px;
    height: 34px;
    line-height: 34px;
    padding: 6px 12px;
    width: 120px;
}