分成三个状态:

  • Mounted
  • Update
  • Unmounted

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

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

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

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

Update:并不是说相应的DOM结构一定会发生改变,React会把当前这个组件的当前的state和之前最近一次的state进行对比,只有当state确实发生了改变并且影响了DOM结构的时候,React才会去改变对应的结构。

Unmounted:一般用得少,得益于浏览器的垃圾回收机制。

this.state可以拿到组件的样式

下面这段是可以用来初始化组件的样式

  1. var Hello = React.createClass({
  2. //把return的样式设置成初始样式
  3. getInitialState:function(){
  4. return {
  5. color: 'red',
  6. fontSize:'40px'
  7. }
  8. },
  9. render:function (){ //this.state可以拿到组件的样式,state是个json对象,在这里初始化的时候就是用了getInitialState中返回的样式对象直接赋值给当前这个组件中h2的样式,也可以取state的键值,比如写成style={{color:this.state.color}}
  10. return (<h2 style={this.state}>Hello {this.props.name}</h2>);
  11. }
  12. });
  13. ReactDOM.render(
  14. <Hello title="Ms" name="World"/>,
  15. document.getElementById('wrap')
  16. );

Propsstate的区别:

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

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

写在componentDidMount的函数里,表示在mounte之后组件发生的变化,将要变化的属性和值放入一个对象中,再传入到setState()的参数里。

下面这个例子是演示在一秒钟后改变组件的样式

  1. var Hello = React.createClass({
  2. getInitialState:function(){
  3. return {
  4. color: 'red',
  5. fontSize:'40px'
  6. }
  7. },
  8. render:function (){
  9. return (<h2 style={this.state}>Hello {this.props.name}</h2>);
  10. },
  11. //这里再说一次为什么要存this为that。定时器方法本事要传一个函数到参数里,这时这个函数作为局部变量,不属于任何对象,那里面的this就是指global对象,在浏览器中就是window。而componentDidMount里的this,指的是当前Hello组件的一个实例,这里的期望是想设置某个组件实例的state,所以要用that存一下再进入定时器,当然也可以不存,直接在定时器参数function最后.bind(this)一下,bind和call以及apply中的第一个参数是指定运行当前函数的调用者,而在setTimeout中参数的this,只是局部变量,还没有进到function中去,所以是指向组件实例。
  12. componentDidMount: function(){
  13. var that = this;
  14. setInterval(function(){
  15. that.setState({
  16. color:`deeppink`,
  17. fontSize:'100px'
  18. });
  19. },1000);
  20. }
  21. });

或者写成:

  1. componentDidMount: function(){
  2. setInterval(function(){
  3. this.setState({
  4. color:`deeppink`,
  5. fontSize:'100px'
  6. });
  7. }.call(this),1000); //这里可以用call,apply或者bind
  8. }

我们发现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. DIPHA

    https://github.com/DIPHA/dipha http://www.rkwitt.org/blog/topological_machine_learning.html 一.预装软件 1 ...

  2. 从零开始学习Node.js例子九 设置HTTP头

    server.js //basic server的配置文件 ; var server = require('./basicserver').createServer(); server.useFavI ...

  3. C - 搜索

    Time Limit:1000MS     Memory Limit:65536KB     64bit IO Format:%I64d & %I64u Submit Status Descr ...

  4. ubuntu安装rpm包

    ubuntu下的rpm包的安装方法 一般是不能够直接安装的,我们需要一个工具叫alien,先install它吧.然后按照下面择所需. 1.直接安装: alien -i -c filename.rpm ...

  5. extJS起步

    万事开头难,不过还好有解决办法——参考如下文章 http://blog.csdn.net/leimengyuanlian/article/details/18748599 可以快速搭建好eclipse ...

  6. Something about Wake-sleep

    DBN可以看做是n个RBM串联组成,是一个多层神经网络. 多层的好处是可以用较少的参数表示复杂的函数. 而一些传统的training算法如BP算法,处理多层网络时,效果就不是很理想.

  7. 关于ref的一点理解

    先写一段代码 class Test { public int Count { get; set; } } static void Main(string[] args) { Test test = } ...

  8. 记一些之前忘记积累的问题(fiddler 学习、XP系统不能上网、XP不能装fiddler、注册表快速找到)

    记一些之前忘记积累的问题: fiddler学习:http://www.cnblogs.com/kingwolf_JavaScript/archive/2012/11/07/FiddlerUI.html ...

  9. uart启示1_task的写法

    task rx_data_task; input [12:0] RXD; reg [3:0] i; begin for (i=0;i<=13;i=i+1) begin repeat (2603) ...

  10. [2]项目创建-使用C#.NET开发基于本地数据缓存的PC客户端

    1.新建项目->已安装->模板->Visual c#->Windows桌面->Windows窗体应用程序,截图如下: 图中1:输入项目名称-“MoneyNotes”,图中 ...