React State
React 里只需要更新组件的state,然后根据新的 state 重新徐娜然用户界面(不要操作DOM)。
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
//在state中,定义一条数据 data ,让它为 new Date().该数据不停变化
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在时间: {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('root')
);
这个时候,当该组件渲染到页面上后,我们看到这个时候它自己是不会变化的。
这是因为 React 在渲染到 页面上时候,类似单帧页面,只会渲染一次。虽然他的数据在变化,但是我们没有设置让他更新页面数据的操作。所有我们可以通过给this.setState()方法设置一个定时器来更新页面。
componentDidMount() {//React的生命周期方法:页面加载完毕后
this.timerID = setInterval(
() => this.tick(),//调用tick函数来修改数据
1000
);
}
componentWillUnmount() {//React的生命周期方法:页面将要销毁时
clearInterval(this.timerID);
}
tick() {
this.setState({ date: new Date() }); //调用this.setState()方法修改数据
}
总结:
初始化:this.state = { user : "Premy" };
初始化可以防止在构造函数 construstor 里;
修改state : this.setState({ user : "Abc " });
state 的作用域只属于当前类,不污染其它块。
React State的更多相关文章
- react state为数组时插入值
react state为数组时,如何插入值.在react里,一切皆是状态state,如果想通过改变state修改渲染效果,只能yongsetState.但是setState又是key:value格式, ...
- React state的使用
相对于angular.js的双向数据绑定,React 可以使用State来实现. React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM). this ...
- React——state
在React--组件中介绍过组件有两种定义方式:函数形式以及类形式.但是要想在组件中使用state,就必须使用类形式定义组件. 组件中的state是组件私有的,完全由组件自己控制. 使用类形式定义一个 ...
- React state和props使用场景
一个组件的显示状态可以由内部状态state.外部参数props所决定. props: 1.props 是从外部传进组件的参数,主要是父组件向子组件传递数据. 2.props 对于使用它的组件来说是只读 ...
- react state成员
组件中包括state,props与render成员函数. react中,主要通过定义state,根据不同state渲染对应用户界面. 过程调用了成员函数setState(data,callback). ...
- React State(状态)
function FormattedDate(props){ return ( <h1>现在是{props.date}</h1> ) } class Clock extends ...
- React state状态
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- react篇章-React State(状态)-组件都是真正隔离的
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-数据自顶向下流动
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...
- react篇章-React State(状态)-将生命周期方法添加到类中
将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...
随机推荐
- mit-6.828 Lab01:Booting a PC Part2 理论知识
Part 2 目录 Part 2 学习理论知识 反汇编 扇区 BIOS 启动过程总结 Boot loader启动过程总结 A20 gate 读boot/boot.S 和 boot/boot.c源码 - ...
- java进阶(3)--接口
一.基本概念 1.接口为引用数据类型,编译后也是class字节码文件 2.接口是完全抽象的,(抽象类是半抽象的),属于特殊的抽象类 3.接口定义方法:[修饰符列表]interface 接口名{} 4. ...
- “随手记”开发记录day19
将软件推荐给父母,先尝试使用软件,观察bug,若有啥不足的,才能及时修改.
- @RequestMapping 参数详解
引言: 前段时间项目中用到了RESTful模式来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为applicatio ...
- 使用cors完成跨域请求处理
跨域的含义 同源策略以及其限制内容 同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS.CSFR等攻击.所谓同源是指"协议+域名+端口&quo ...
- Java对象与类—对象与类
1.类 类(class)是构造对象的模板,具体点说类就是对具有相同性质,相同行为的一群对象的抽象说明.由类构造(construst)对象的过程称为创建类的实例(instance). 2.对象 对象是类 ...
- 防御sqlmap攻击之动态代码防御机制
本文首发于“合天智汇”公众号 作者:SRainbow 关于动态代码防御机制,是自己瞎取的名字,目前我还没有看到过类似的文章.如果有前辈已经发表过,纯属巧合!!!我仅是突发奇想的一个想法,说不上高大上. ...
- 精讲RestTemplate第6篇-文件上传下载与大文件流式下载
本文是精讲RestTemplate第6篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
- ldap登录验证的通用步骤
和利用数据库进行验证类似,LDAP中也是利用登陆名和密码进行验证,LDAP中会定义一个属性password,用来存放用户密码,而登陆名使用较多的都是mail地址.那怎么样才能正确的用LDAP进行身份验 ...
- 遍历数组,对象和JSON
遍历数组 var arr2 = [3,4,5,6,7,8]; //第一种方法 for(var i =0;i<arr.length;i++){ console.log(arr2[i]); } // ...