分成三个状态:

  • Mounted
  • Update
  • Unmounted

Mounted:当我们看到组件在浏览器中从无到有的效果的时候,mounted已经结束了,这个组件已经被mounted了

有这个阶段有2个hook函数:

  • componentWillMount:组件将要被mount之前调用
  • componentDidMount:组件被mount之后调用

还有一个函数,是初始化组件的stategetInitialState()

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')
);

Propsstate的区别:

一般是组件调用方在调用组件时用的,Props一旦指定了一般是不会变化的。对于被调用的组件来说,Props的拥有者是其调用方,在DOM结构上一般是父级,而state可以认为是私属于当前组件的,它的值是可以变化的。

修改state的值——调用componentsetState()方法

写在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的生命周期的更多相关文章

  1. 【React】学习笔记(二)——组件的生命周期、React脚手架使用

    原教程视频:ttps://www.bilibili.com/video/BV1wy4y1D7JT?p=2&spm_id_from=pageDriver 目录 一.组件的生命周期 1.1.生命周 ...

  2. 【学】React的学习之旅1

    React的学习之旅1 单标签要有斜杠代表结束 用React.createClass()方法时,赋值后的组件名称首字母一定要大写 一定要先定义组件,再用ReactDOM.render调用 组件里ren ...

  3. 玩转 React(五)- 组件的内部状态和生命周期

    文章标题总算是可以正常一点了-- 通过之前的文章我们已经知道:在 React 体系中所谓的 "在 JavaScript 中编写 HTML 代码" 指的是 React 扩展了 Jav ...

  4. react 入坑笔记(六) - 组件的生命周期

    React 组件生命周期 详细参考: react 组件生命周期 组件的生命周期可分为三个状态: 1.Mounting:已经挂载/插入到真实 DOM 树上: 2.Updating:正在被重新渲染: 3. ...

  5. React.js 小书 Lesson20 - 更新阶段的组件生命周期

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...

  6. React Native 中的component 的生命周期

    React Native中的component跟Android中的activity,fragment等一样,存在生命周期,下面先给出component的生命周期图 getDefaultProps ob ...

  7. java线程基础巩固---Thread中断Interrupt方法学习&采用优雅的方式结束线程生命周期

    Interrupt学习: 在jdk中关于interrupt相关方法有三个,如下: 关于上面的疑问会在稍后进行阐述滴,下面看代码: 编译运行: 应该说是t线程为啥在被打断之后没有退出,还是在运行状态,这 ...

  8. Android学习笔记(五)——活动的生命周期

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 为了能写出流畅连贯的程序,我们需要了解一下活动的生命周期. 一.返回栈 Android 中的活动是可以层叠的. ...

  9. 张高兴的 Xamarin.Android 学习笔记:(三)活动生命周期

    本文将直接解释我写的一个示例.示例目的在于展示 Android 活动在 Xamarin 中的用法.如果有朋友对基础知识不太了解建议先学 Android . 新建一个 Xamarin.Android 项 ...

随机推荐

  1. [转]Linux 的多线程编程的高效开发经验

    Linux 平台上的多线程程序开发相对应其他平台(比如 Windows)的多线程 API 有一些细微和隐晦的差别.不注意这些 Linux 上的一些开发陷阱,常常会导致程序问题不穷,死锁不断.本文中我们 ...

  2. 汇编中bss,data,text,rodata,heap,stack,意义

    bss段: BSS段(bsssegment)通常是指用来存放程序中未初始化的全局变量的一块内存区域.BSS是英文BlockStarted by Symbol的简称.BSS段属于静态内存分配. data ...

  3. C语言的作用域规则

    作用域规则 程序中名字的作用域,通俗的讲,就是这个名字在程序中的使用范围.在C语言中,作用域的规则相对比较简单,主要分为 全局作用域 和 局部作用域 两种. 一个变量如果定义在函数中,那么这个变量的作 ...

  4. RSA不限长度非对称加密解密C#

    RSA 分段加解密[解决“不正确的长度”的异常] RSA 是常用的非对称加密算法.最近使用时却出现了“不正确的长度”的异常,研究发现是由于待加密的数据超长所致. .NET Framework 中提供的 ...

  5. 用canvas生成二维码

    $("#actimg").qrcode({                        render: "canvas",    //设置渲染方式,有tabl ...

  6. php字符串处理函数大全

      addcslashes - 为字符串里面的部分字符添加反斜线转义字符addslashes - 用指定的方式对字符串里面的字符进行转义bin2hex - 将二进制数据转换成十六进制表示chop - ...

  7. ubuntu12.04静态ip设置问题

    由于linux知识不是学的很深,所以仅代表我自己的设置成功总结. 第一步是设置/etc/network/interfaces 增加静态ip设置 auto eth0iface eth0 inet sta ...

  8. 关于Java中的基本数据类型转换

    Java中的基本类型有四种,其中整型分为byte.short.int.long,浮点型分为float.double,字符型char,布尔型boolean.8种类型的级别由低到高byte->sho ...

  9. help man info 三个的区别

    “--help”选项 “--help”是一个工具选项,大部分的GNU工具都具备这个选项,“--help”选项可以用来显示一些工具的信息 “man”工具 Man工具可以显示系统手册页中的内容,这些内容大 ...

  10. javascript函数一共可分为五类: ·常规函数 ·数组函数 ·日期函数 ·数学函数 ·字符串函数

    javascript函数一共可分为五类:    ·常规函数    ·数组函数    ·日期函数    ·数学函数    ·字符串函数    1.常规函数    javascript常规函数包括以下9个 ...