分成三个状态:

  • 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. 探索软件工程道路上的我 IV (Θ∀Θ#)

    开发语言:Java 开发工具:UltraEdit 小伙伴博客:http://www.cnblogs.com/hyating/ github地址:https://github.com/JUNYU217/ ...

  2. Thinkphp_基础(2)URL模式

    URL请求 ThinkPHP采用单一入口模式访问应用,对应用的所有请求都定向到应用的入口文件,系统会从URL参数中解析当前请求的模块.控制器和操作,下面是一个标准的URL访问格式: http://se ...

  3. 小学生四则运算出题程序 无操作界面java版 简单的运用java中一些基本操作

    这是本学期java课中实验大纲里的第一个实验,这里简单做了一个无用户界面版本. import java.util.Random; import java.util.Scanner; public cl ...

  4. Linux Shell数组常用操作详解

    Linux Shell数组常用操作详解 1数组定义: declare -a 数组名 数组名=(元素1 元素2 元素3 ) declare -a array array=( ) 数组用小括号括起,数组元 ...

  5. RaspBMC使用攻略与问题总结

    XBMC最初叫Xbox Media Center,是xbox的游戏控制器,后来移植到其他操作系统 XBMC在v14后改名为Kodi RaspBMC是XBMC在Rasperry PI上定制的linux发 ...

  6. Linux mint 14输入法问题

    新安装了Linux mint 14,莫名其妙地没有了中文输入法,安装并设置IBUS为默认输入法,但怎么也没反应.点击输入法图标,上面显示“No input window”,其实这不关输入法自身程序和设 ...

  7. DWR同步异步设置

    做项目时遇到一个问题,使用DWR发现js总是执行完了之后再执行DWR的内容,后来发现然来DWR也有一种同步机制:DWREngine.setAsync(false); 还需要在代码末尾恢复异步DWREn ...

  8. 黑马.net12期视频教程

    完整高清视频http://www.ggfenxiang8.com/?p=301

  9. SDK截图程序(二):保存截图

    怎样将我们上一篇截取的位图保存在文件夹里.根据MSDN,思路是这样的,用CreateFile函数在磁盘建立一个bmp文件,用WriteFile填充该bmp文件的文件头.信息头,像素等信息.之前我们只有 ...

  10. boost array使用

    #include <iostream> #include<boost/array.hpp> int main() { boost::array<int, 6> ar ...