专栏首页前端达人「React 基础」组件生命周期函数shouldComponentUpdate()介绍
原创

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

大家好,在「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;
}

小节

今天的内容就和大家分享到这里,感谢你的阅读,下篇文章我将会继续和大家分享 componentWillReceiveProps() 和 componentWillUnmount() 这两个函数,敬请期待...

《 React 手册》系列文章

「React 手册」在 React 项目中使用 ES6,你需要了解这些(一)

「React 手册」React 16 中值得你关注的新特性

「React 手册 」在 Windows 下使用 React , 你需要注意这些问题

「React 手册 」从创建第一个React组件开始学起

「React 手册 」关于组件属性(props)与状态(state)的介绍

「React 手册 」如何创建函数组件?

「React 手册 」组件生命周期相关函数——componentWillMount

「React 手册 」组件生命周期函数——componentDidMount 介绍

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 「React 基础」从创建第一个React组件开始学起

    大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性和团队成员在 Winwo...

    前端达人
  • 「React 手册 」从创建第一个 React 组件开始学起

    大家好,在本系列的前三篇文章里,我们一起学习了在 React 中经常会用到的 ES6 新特性,以及 REACT 16+ 版本的一些新特性 和 团队 成员在 Wi...

    前端达人
  • 「css实用手册」CSS 垂直居中的七种方法,值得收藏

    我之所以整理这类专题的手册,就是CSS相关的内容实在太零散,同时又夹杂着相关的兼容问题。遇到问题时,我们有时过度依赖搜索引擎进行求证解决,解决完也没做认真的归纳...

    前端达人
  • VS第一天(一堆错误的错误示范)

    https://www.bilibili.com/video/av48489320/?p=1

    小小咸鱼YwY
  • Handsome 主题实现最新评论首页博客导航栏自动排第一功能

    今天在【知言笔记】上看到了『Typecho实现每评论一次自动排第一功能』一文,终于算是实现了最新评论首页博客导航栏自动排第一功能的功能,一直很想用上这个功能,可...

    明月云服务
  • 设计师一小步,程序员一大步

    首先,从产品人员这里,如果一开始就不信任开发人员,总想把东西往简单了说,或者排上了时间又插需求,那么开发人员也会产生相应的不信任:反正你是要插需求的,不多估算点...

    姬小光
  • java架构之路-(mysql底层原理)Mysql事务隔离与MVCC

      上几篇博客我们大致讲了一下mysql的底层结构,什么B+tree,什么Hash需要回行啊,再就是讲了mysql优化的explain,这次我们来说说mysql...

    小菜的不能再菜
  • 高明!OpenAI提出HER算法,AI系统学会从错误中学习

    ---- 新智元报道 来源:OpenAI 编译:小潘 【新智元导读】OpenAI在利用增强学习训练人工智能系统任务上不断地取得进步。他们发布的新平台显...

    新智元
  • 扫雷

    一直想发表扫雷这种锻炼思维的游戏,其实扫雷弄个标题栏可以随意选择挑战难度是效果最佳的,但是呢easyx图形库没有标题栏,所以就委屈各位看官一级一级打上去了。由于...

    DeROy
  • 人工智能有助于阿尔茨海默症的早期诊断

    据加拿大麦吉尔大学报道,人工智能有助于阿尔茨海默症的早期诊断。想象一下这样的情形:多年后医生能够识别出谁可能会患老年痴呆症。这种预后能力可能会让病人及家人有时间...

    人工智能快报

扫码关注云+社区

领取腾讯云代金券