【学】React的学习之旅2 - React Component的生命周期
分成三个状态:
- Mounted
- Update
- Unmounted
Mounted
:当我们看到组件在浏览器中从无到有的效果的时候,mounted已经结束了,这个组件已经被mounted了
有这个阶段有2个hook函数:
componentWillMount
:组件将要被mount之前调用componentDidMount
:组件被mount之后调用
还有一个函数,是初始化组件的state
,getInitialState()
Update
:并不是说相应的DOM结构一定会发生改变,React会把当前这个组件的当前的state和之前最近一次的state进行对比,只有当state确实发生了改变并且影响了DOM结构的时候,React才会去改变对应的结构。
Unmounted
:一般用得少,得益于浏览器的垃圾回收机制。
this.state
可以拿到组件的样式
下面这段是可以用来初始化组件的样式
var Hello = React.createClass({
//把return的样式设置成初始样式
getInitialState:function(){
return {
color: 'red',
fontSize:'40px'
}
},
render:function (){ //this.state可以拿到组件的样式,state是个json对象,在这里初始化的时候就是用了getInitialState中返回的样式对象直接赋值给当前这个组件中h2的样式,也可以取state的键值,比如写成style={{color:this.state.color}}
return (<h2 style={this.state}>Hello {this.props.name}</h2>);
}
});
ReactDOM.render(
<Hello title="Ms" name="World"/>,
document.getElementById('wrap')
);
Props
和state
的区别:
一般是组件调用方在调用组件时用的,Props一旦指定了一般是不会变化的。对于被调用的组件来说,Props的拥有者是其调用方,在DOM结构上一般是父级,而state可以认为是私属于当前组件的,它的值是可以变化的。
修改state
的值——调用component
的setState()
方法
写在componentDidMount
的函数里,表示在mounte
之后组件发生的变化,将要变化的属性和值放入一个对象中,再传入到setState()
的参数里。
下面这个例子是演示在一秒钟后改变组件的样式
var Hello = React.createClass({
getInitialState:function(){
return {
color: 'red',
fontSize:'40px'
}
},
render:function (){
return (<h2 style={this.state}>Hello {this.props.name}</h2>);
},
//这里再说一次为什么要存this为that。定时器方法本事要传一个函数到参数里,这时这个函数作为局部变量,不属于任何对象,那里面的this就是指global对象,在浏览器中就是window。而componentDidMount里的this,指的是当前Hello组件的一个实例,这里的期望是想设置某个组件实例的state,所以要用that存一下再进入定时器,当然也可以不存,直接在定时器参数function最后.bind(this)一下,bind和call以及apply中的第一个参数是指定运行当前函数的调用者,而在setTimeout中参数的this,只是局部变量,还没有进到function中去,所以是指向组件实例。
componentDidMount: function(){
var that = this;
setInterval(function(){
that.setState({
color:`deeppink`,
fontSize:'100px'
});
},1000);
}
});
或者写成:
componentDidMount: function(){
setInterval(function(){
this.setState({
color:`deeppink`,
fontSize:'100px'
});
}.call(this),1000); //这里可以用call,apply或者bind
}
我们发现state的值的变化,都会导致组件的当前状态变成updating状态,从而重新render(),我们并没有显式地修改组件的样式,但是state的值变了之后,它的样式就跟着变了。
【学】React的学习之旅2 - React Component的生命周期的更多相关文章
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
原教程视频:ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.组件的生命周期 1.1.生命周 ...
- 【学】React的学习之旅1
React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...
- 玩转 React(五)- 组件的内部状态和生命周期
文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...
- react 入坑笔记(六) - 组件的生命周期
React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...
- React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
- React Native 中的component 的生命周期
React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...
- java线程基础巩固---Thread中断Interrupt方法学习&采用优雅的方式结束线程生命周期
Interrupt学习: 在jdk中关于interrupt相关方法有三个,如下: 关于上面的疑问会在稍后进行阐述滴,下面看代码: 编译运行: 应该说是t线程为啥在被打断之后没有退出,还是在运行状态,这 ...
- Android学习笔记(五)——活动的生命周期
//此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 为了能写出流畅连贯的程序,我们需要了解一下活动的生命周期. 一.返回栈 Android 中的活动是可以层叠的. ...
- 张高兴的 Xamarin.Android 学习笔记:(三)活动生命周期
本文将直接解释我写的一个示例.示例目的在于展示 Android 活动在 Xamarin 中的用法.如果有朋友对基础知识不太了解建议先学 Android . 新建一个 Xamarin.Android 项 ...
随机推荐
- [转]Linux 的多线程编程的高效开发经验
Linux 平台上的多线程程序开发相对应其他平台(比如 Windows)的多线程 API 有一些细微和隐晦的差别.不注意这些 Linux 上的一些开发陷阱,常常会导致程序问题不穷,死锁不断.本文中我们 ...
- 汇编中bss,data,text,rodata,heap,stack,意义
bss段: BSS段(bsssegment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文BlockStarted by Symbol的简称.BSS段属于静态内存分配. data ...
- C语言的作用域规则
作用域规则 程序中名字的作用域,通俗的讲,就是这个名字在程序中的使用范围.在C语言中,作用域的规则相对比较简单,主要分为 全局作用域 和 局部作用域 两种. 一个变量如果定义在函数中,那么这个变量的作 ...
- RSA不限长度非对称加密解密C#
RSA 分段加解密[解决“不正确的长度”的异常] RSA 是常用的非对称加密算法.最近使用时却出现了“不正确的长度”的异常,研究发现是由于待加密的数据超长所致. .NET Framework 中提供的 ...
- 用canvas生成二维码
$("#actimg").qrcode({ render: "canvas", //设置渲染方式,有tabl ...
- php字符串处理函数大全
addcslashes - 为字符串里面的部分字符添加反斜线转义字符addslashes - 用指定的方式对字符串里面的字符进行转义bin2hex - 将二进制数据转换成十六进制表示chop - ...
- ubuntu12.04静态ip设置问题
由于linux知识不是学的很深,所以仅代表我自己的设置成功总结. 第一步是设置/etc/network/interfaces 增加静态ip设置 auto eth0iface eth0 inet sta ...
- 关于Java中的基本数据类型转换
Java中的基本类型有四种,其中整型分为byte.short.int.long,浮点型分为float.double,字符型char,布尔型boolean.8种类型的级别由低到高byte->sho ...
- help man info 三个的区别
“--help”选项 “--help”是一个工具选项,大部分的GNU工具都具备这个选项,“--help”选项可以用来显示一些工具的信息 “man”工具 Man工具可以显示系统手册页中的内容,这些内容大 ...
- javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数
javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数 1.常规函数 javascript常规函数包括以下9个 ...