React: React的组件状态机制
一、简介
在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的组件状态机制的更多相关文章
- 【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制
****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会 ...
- [转] 深入理解React 组件状态（State）
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- react 中的无状态函数式组件
无状态函数式组件,顾名思义,无状态,也就是你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件,接收Props,渲染DOM,而不关注其他逻辑. 其实无状态函数式组件也是 ...
- 深入理解React 组件状态（State）
React 的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State(状态),State是一个组件的UI数据模型,是组件渲染时的数据依据. 一. 如何定义State 定义一个合适 ...
- react 中组件状态的一些理解
组件状态:即 state 只有当state发生变化时,组件才会更新. 当一个html标签的值依赖于state的值得时候,如果state的值没有更新时,这个标签的值无论如何也是不会更新的. 看下面示例: ...
- 从 0 到 1 实现 React 系列 —— 2.组件和 state|props
看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/. ...
- React: React的属性验证机制
一.简介 在开发中,属性变量类型的验证,几乎是任何语言都必须关注的问题,因为如果传入的数据类型不对,轻者程序运行仅仅是给出警告⚠️,严重的会直接导致程序中断,APP闪退或者web页面挂掉,这是很严重的 ...
- React中父子组件数据传递
Vue.js中父子组件数据传递:Props Down , Events Up Angular中父子组件数据传递:Props Down, Events Up React中父子组件数据传递:Prop ...
- 从零开始学前端，React框架背后的核心机制和原理JSX
什么是React React是起源于Facebook的一个前端框架,用于构建用户界面的JavaScript库,Facebook用来探索一种更加高效优雅的Javascript MVC框架来架设Insta ...
随机推荐
- 从0系统学Android--3.2四种基本布局
从0系统学Android--3.2四种基本布局 本系列文章目录:更多精品文章分类 本系列持续更新中.... 3.3 系统控件不够用?创建自定义控件 上一节我们学习了 Android 中的一些常用的控件 ...
- MySQL相关参数总结
保留个原文链接,避免被爬虫爬了过去,以便后续更正补充:https://www.cnblogs.com/wy123/p/11273023.html MySQL参数繁多,是一个需要根据具体业务.软硬件环境 ...
- Cocos2d-x3.0网络通信学习（一）
配置:win7+Cocos2d-x.3.0+VS2012 摘要:建立基本的http通信并得到返回信息. 一.添加项目与编译库 1.添加头文件 在需要用到Http网络相关类的文件中加入头文件 #incl ...
- 正则表达式(Regular Expression)入门
一.正则表达式的使用场景: 上传文件类型的判断,电子邮件的判断,电话号码的判断,文本的搜索与替换. 二.正则表达式的语法规则: 1.行定位符: ^表示行的开始,$表示行的结尾 ^tm 可以匹配 tm ...
- Download Shuttle Pro mac文件下载器使用指南
Download Shuttle Pro是适用于macOS的最强大的下载管理器和加速器.它将文件下载分为多个部分,与使用Web浏览器相比,可以提高整体下载速度.使用我们的Pro版本,您可以访问我们的新 ...
- 在IOS设备上POST提交form表单，后台接收不到值怎么办？
原文:https://blog.csdn.net/xhaimail/article/details/90440029 最近在工作上遇到一个奇葩问题,在Android和Windows平台上做请求时参数都 ...
- ReactNative: 使用导航栏组件-NavigatorIOS组件和Navigator组件
一.简言 在软件开发中,不论是Web还是App,它们的应用程序都是由很多的功能视图组成的.对于这些组合的视图,如何实现页面间平滑地过渡,应用都有统一的一套跳转机制,这个功能就是路由或者叫导航.应用程序 ...
- 关于Oracle数据库的rownum应用
它是Oracle系统顺序分配为从查询返回的行的编号,返回的第一行分配的是1,第二行是2,以此类推,这个伪字段可以用于限制查询返回的总行数,而且rownum不能以任何表的名称作为前缀. 如以下语句将无法 ...
- sql书写和执行顺序
(8)SELECT (9)DISTINCT<select_list> (1)FROM <left_table> (3)<join_type> JOIN<rig ...
- textarea中文本高亮选中
最近在实现原文/译文句段高亮对比显示,和有道翻译类似,如下图所示: 最初的解决方案是采用富文本编辑器,把所有句段信息都用HTML标签包裹,操作空间比较大,页面上需要的功能几乎都可以实现,但是由此带来了 ...