大家好，在《React手册》组件生命周期相关函数-componentWillMount和《React手册》组件生命周期函数-componentDidMount介绍在这两篇文章中，我们通过例子了解了componentWillMount和componentDidMount的两个生命周期函数，在这篇文章我们将通过一个虚拟货币兑换的例子来学习另一个重要的函数shouldComponentUpdate。

先看看我们的应用长什么样

比特币这种虚拟货币大家应该都知道，早点得到，那可是大有来头。 今天我们要做一个用美元购买比特币的小应用。 用户以美元输入金额比特币价格实时行情 color.com，系统会告诉你可以兑换多少虚拟比特币。 我们的例子如下图所示：

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

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 (
            

                
 Buy Crypto Coins! 
                

                    
How much dollars do you have?
                    

                        
                    
                
                

                    
 Crypto Coins price: $10 
                    

                        you can  buy 
                        {this.state.dollars / 10}
                     coins.
                    
                
            
        );
    }
}
export default  Coins;

3、你可能认为只要用户在输入框中输入了一些东西，我们就会更新state.dollars的数据状态，但是如果你运行上面的代码，你会发现当你输入的数字小于10时，界面的提示信息不会有变化比特币价格实时行情 color.com，一直提示只能兑换0个比特币。 如果输入10的整数倍，界面提示信息会发生变化。

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

该函数的返回值必须是布尔值，默认返回true，返回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;
}

部分

今天的内容就在这里和大家分享。 感谢您阅读。 下一篇我会继续和大家分享componentWillReceiveProps()和componentWillUnmount()这两个函数。 敬请关注...

React 手册系列文章

《React手册》在React项目中使用ES6，你需要知道这些（一）

《React 手册》React 16 值得你关注的新特性

《React手册》Windows下使用React，你需要注意这些问题

“React 手册”从创建您的第一个 React 组件开始

《React手册》组件属性（props）和状态（state）介绍

《React手册》如何创建函数组件？

《React手册》组件生命周期相关函数——componentWillMount

《React手册》组件生命周期函数——componentDidMount介绍