react学习记录(三)——状态、属性、生命周期
react的状态state
React 里,只需更新组件的 state,然后根据新的 state 重新渲染用户界面(不要操作 DOM)
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
} componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
} componentWillUnmount() {
clearInterval(this.timerID);
} tick() {
this.setState({
date: new Date()
});
} render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
} ReactDOM.render(
<Clock />,
document.getElementById('example')
);
1、通过上边的代码可以看出页面中显示的时间是在state中的,但是在设置计时器后,没过一秒重新更新state的值,页面中显示出来的也会每隔一秒变化一次,说明页面中的内容是跟随数据的变化实时变化的,
2、时间的变化是因为在tick函数中进行了state的改变,而tick函数中改变state的值是在setState中执行的,所以state的值不能直接改变state,要通过setstate来改变
3、设置计时器和清除计时器是在两个函数中执行的,这两个函数是生命周期的钩子函数
react的属性props
react中的props属性是从父组件中获取的,也可以设置默认的属性,如果父组件没有传值的时候直接使用默认的属性
class HelloMessage extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} HelloMessage.defaultProps = {
name: 'Runoob'
};
//此处如果传入name值使用的是给定的值,如果没有传入值的话使用的是Runoob
const element = <HelloMessage/>; ReactDOM.render(
element,
document.getElementById('example')
);
props属性是不能被修改的,如果使用需要被修改的值要用state来代替props
react的生命周期
组件的生命周期可分成三个状态:
- Mounting:已插入真实 DOM
- Updating:正在被重新渲染
- Unmounting:已移出真实 DOM
生命周期的方法有:
componentWillMount 在渲染前调用,在客户端也在服务端。
componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用,可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。
componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。
shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
可以在你确认不需要更新组件时使用。componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。
componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
react学习记录(三)——状态、属性、生命周期的更多相关文章
- React学习笔记-4-什么是生命周期
什么是声明周期?组件本质上就是状态机,输入确定,输出一定确定.如何理解这一点?react有两个特点,第一个就是去除了所有的手动dom操作,也就是使用jsx.第二个就是组件把状态和结果一一对应起来,从而 ...
- Spring学习记录(八)---Bean的生命周期
之前说过,在调用下面时,就创建了容器和对象 ApplicationContext ctx = new ClassPathXmlApplicationContext("bean.xml&quo ...
- Quartz定时任务学习(二)web应用/Quartz定时任务学习(三)属性文件和jar
web中使用Quartz 1.首先在web.xml文件中加入 如下内容(根据自己情况设定) 在web.xml中添加QuartzInitializerServlet,Quartz为能够在web应用中使用 ...
- React源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理.本系列文章希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期(C ...
- React 源码剖析系列 - 生命周期的管理艺术
目前,前端领域中 React 势头正盛,很少能够深入剖析内部实现机制和原理. 本系列文章 希望通过剖析 React 源码,理解其内部的实现原理,知其然更要知其所以然. 对于 React,其组件生命周期 ...
- k8s的Pod状态和生命周期管理
Pod状态和生命周期管理 一.什么是Pod? 二.Pod中如何管理多个容器? 三.使用Pod 四.Pod的持久性和终止 五.Pause容器 六.init容器 七.Pod的生命周期 (1)Pod p ...
- Asp.Net Core 3.1学习-依赖注入、服务生命周期(6)
1.前言 面向对象设计(OOD)里有一个重要的思想就是依赖倒置原则(DIP),并由该原则牵引出依赖注入(DI).控制反转(IOC)及其容器等概念.在学习Core依赖注入.服务生命周期之前,下面让我们先 ...
- JavaScript学习记录三
title: JavaScript学习记录三 toc: true date: 2018-09-14 23:51:22 --<JavaScript高级程序设计(第2版)>学习笔记 要多查阅M ...
- [转]Java 对象锁-synchronized()与线程的状态与生命周期
线程的状态与生命周期 Java 对象锁-synchronized() ? 1 2 3 4 synchronized(someObject){ //对象锁 } 对象锁的使用说明: 1.对象锁的返 ...
- React Native组件的结构和生命周期
React Native组件的结构和生命周期 一.组件的结构 1.导入引用 可以理解为C++编程中的头文件. 导入引用包括导入react native定义的组件.API,以及自定义的组件. 1.1 导 ...
随机推荐
- Evolutionary approaches towards AI: past, present, and future
Evolutionary approaches towards AI: past, present, and future 2019-10-06 07:28:13 This blog is from: ...
- 微信小程序支付接口之Django后台
本文链接:https://blog.csdn.net/qq_41860162/article/details/89098694Python3-django-微信小程序支付接口调用工具类生成一系列微信官 ...
- wx.request 请求与django
wx.request 1.wx.request相当于ajax请求,和django后台进行交互 官方文档:https://developers.weixin.qq.com/miniprogram/dev ...
- CentOS7 增加回环地址
添加回环地址的命令和说明如下: #添加一个回环地址到lo网卡,添加多个可以改lo:后边的序号 [要添加的地址] netmask 255.255.255.255 broadcast [要添加的地址] # ...
- Java:JSON和Map相互转换
Java:JSON与Map相互转换 需要jar包:jackson-core-2.6.0.jar,jackson-databind-2.6.0.jar,jackson-annotations-2.6.0 ...
- 查找算法(6)--Block search--分块查找
1. 分块查找 (1)说明分块查找又称索引顺序查找,它是顺序查找的一种改进方法. (2)算法思想:将n个数据元素"按块有序"划分为m块(m ≤ n).每一块中的结点不必有序,但块与 ...
- advanceInstaller制作中文安装界面
AdvanceInstaller15.7 ,上述画框选择.
- python os.popen('xxx.py') 遇到的坑 (No Child Processes)
1.调用系统库 platform.system() 报错: 2.os.popen() 打开的文件流未关闭也会出现这种错误. f = os.popen() f.read() f.close() 问题复现 ...
- 【DL基础】GridSearch网格搜索
前言 参考 1. 调参必备---GridSearch网格搜索: 完
- csu 1976: 搬运工小明
1976: 搬运工小明 Submit Page Summary Time Limit: 2 Sec Memory Limit: 128 Mb Submitted: 94 ...