一、简介

在React中，有两个核心的默认属性，分别是state和props。state会记录组件的状态，React根据状态的变化，会对界面做相应的调整或渲染。props则是数据流向属性，React通过props传递来实现父子组件之间的通信。本篇主要研究React的组件状态机制，在很多Web界面可以看到数据不停的变化，其实，这个过程就是React监听到state状态在不停地发生改变时一次次重新对组件重新渲染的结果。基于React这个机制，所以开发者可以很灵活地用state来完成对行为的控制、数据的更新、以及界面的渲染。借助于组件的生命周期，可以在函数getInitialState中设置默认的state状态，行为操作等逻辑放在 componentDidMount函数中执行，这个执行过程中如果需要改变状态，调用this.setState函数进行更新即可，此时React会根据state的变化实时调整组件。如下图，这个只是组件状态机制通用的一个运用流程，开发者可以根据自己的需求完成并加以利用。

二、案例

在界面上，有一个label组件，页面渲染之前，启动一个系统计时器，不停的改变状态值，进而实时更新组件。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>Hello React</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="container"></div>

    <script type="text/babel">

        //label标签

        var CountLabel = React.createClass({

            //组件初始化时调用, 进行一些数据初始化

            getInitialState: function () {

                console.log("---getInitialState----")

                return {

                    count: 0

                };

            },

            //进行渲染操作，对组件进行更新

            render: function () {

                console.log("---render----")

                var countStyle = {

                    color: "red",

                    fontSize: 50

                };

                //数值转字符串
                var count = this.state.count.toLocaleString()

                return (

                    <h1 style={countStyle} >{count}</h1>

                );

            },

            //定义计时器回调函数，计时器开始运行，更新state状态, render函数会重新渲染

            timerTick: function() {

                //等于50时重置

                if(this.state.count === 50) {

                    this.setState({

                        count: 0

                    });

                }else {

                    //继续累加

                    this.setState({

                        count: this.state.count + 10

                    });

                }

            },

            //组件完成第一次渲染后调用

            componentDidMount: function () {

                console.log("---componentDidMount----")

                //使用系统函数，定义一个计时器，timerTick为计时器回调函数

                setInterval(this.timerTick,1000);

            }

        });    

        //计时器盒子

        var TimerBox = React.createClass({

            render:function() {

                //设置盒子样式

                var divStyle = {

                    width: 200,

                    textAlign: "center",

                    backgroundColor: "#EDA",

                    padding: 10,

                    fontFamily: "sans-serif",

                    borderRadius: 10

                };

                return (

                    <div style={divStyle} >

                        <CountLabel/>

                    </div>

                );

            }

        });

        
        //组件挂载

        ReactDOM.render(

                        <TimerBox/>,

                        document.getElementById('container')

                    );

    </script>

</body>

</html>

三、结果

1、打印, 可以看到正常的生命周期都只调用一次，但是render函数随着计时器更改state状态可以不停地调用。

2、动图

React: React的组件状态机制的更多相关文章

  1. 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

    ****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...

  2. [转] 深入理解React 组件状态（State）

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  3. react 中的无状态函数式组件

    无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...

  4. 深入理解React 组件状态（State）

    React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...

  5. react 中组件状态的一些理解

    组件状态:即 state 只有当state发生变化时,组件才会更新. 当一个html标签的值依赖于state的值得时候,如果state的值没有更新时,这个标签的值无论如何也是不会更新的. 看下面示例: ...

  6. 从 0 到 1 实现 React 系列 —— 2.组件和 state|props

    看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...

  7. React: React的属性验证机制

    一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...

  8. React中父子组件数据传递

    Vue.js中父子组件数据传递:Props Down ,  Events Up Angular中父子组件数据传递:Props Down,  Events  Up React中父子组件数据传递:Prop ...

  9. 从零开始学前端，React框架背后的核心机制和原理JSX

    什么是React React是起源于Facebook的一个前端框架,用于构建用户界面的JavaScript库,Facebook用来探索一种更加高效优雅的Javascript MVC框架来架设Insta ...

随机推荐

  1. android sdk tools里找不到draw9patch.bat 如何制作.9.png 格式图片

    1.什么是.9.png格式 .9.png格式的图片可以在安卓平台指定拉伸区域,防止图片失真,一般用作背景图. 2.前提 最近项目中要用到.9.png格式图片,想着这个简单使用draw9patch.ba ...

  2. 【Beta阶段】第十二周Scrum会议

    [Beta阶段]第十二周Scrum会议 本次会议为第十二周第一次Scrum Meeting,会议对Beta阶段工作进行了总结,针对Beta阶段还未完成的问题进行了讨论. 会议时间为2019.12.3. ...

  3. Go交叉编译(Go语言Mac/Linux/Windows下交叉编译)

    Go交叉编译(Go语言Mac/Linux/Windows下交叉编译) 2019/11/21 Chenxin 在很多时候,由于开发的方便,会有这样的场景出现,使用Mac开发或使用Windows开发,需要 ...

  4. RSA加解密&RSA加验签详解

    RSA 加密算法是目前最有影响力的 公钥加密算法,并且被普遍认为是目前 最优秀的公钥方案 之一.RSA 是第一个能同时用于 加密 和 数字签名 的算法,它能够 抵抗 到目前为止已知的 所有密码攻击,已 ...

  5. Oracle - SPM固定执行计划

    1. 通过dbms_xplan.display_cursor查看指定sql都有哪些执行计划 SQL> select * from table(dbms_xplan.display_cursor( ...

  6. MVC(实战二：网址映射)

    一.默认网址 Global.asax 默认网址配置: 此时打开编辑页面,效果如下: ?后面包含name参数和Email参数  在Global中修改网址路由: public static void Re ...

  7. 2019-2020-1 20199305《Linux内核原理与分析》第七周作业

    进程的描述与创建 (一)进程的描述 (1)操作系统内核实现操作系统的三大管理功能(进程管理最为核心) 进程管理 内存管理 文件系统 (2)在Linux内中用一个数据结构struct task_stru ...

  8. Oracle数据库之第一篇

    1 : Oracle 简介 : 是美国ORACLE公司(甲骨文)提供的以分布式数据库为核心的一组软件产品,是目前最流行的客户/服务器IP,端口,用户名.密码,点击:连接 (CLIENT/SERVER) ...

  9. Create a Solution using the Wizard 使用向导创建解决方案

    In this lesson, you will learn how to create a new XAF solution. You will also be able to run the ge ...

  10. arcgis api 4.x for js 图层拓展篇之mapvLayer(附源码下载)

    因为在项目开发过程中,使用的arcgis js api版本是4.7,并不能支持客户端渲染热力图,想到arcgis js api 4.x的渲染是基于canvas,故琢磨着是否能借助类似于mapV.ech ...