【学】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 项 ...
随机推荐
- codeforces 721C (拓排 + DP)
题目链接:http://codeforces.com/contest/721/problem/C 题意:从1走到n,问在时间T内最多经过多少个点,按路径顺序输出. 思路:比赛的时候只想到拓排然后就不知 ...
- amazon oa2 - insert a value into a cycled linked list
遍历,一共有三种情况, 1. pre <= x <= current 2. 遍历到了head时,x>tail 或者 x<=head (不会等于tail) 3. 遍历回aNode ...
- 实现PageProcessor
4.1 实现PageProcessor 这部分我们直接通过GithubRepoPageProcessor这个例子来介绍PageProcessor的编写方式.我将PageProcessor的定制分为三个 ...
- G - 非常可乐
Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Submit Status Pract ...
- maven - dependencies与dependencyManagement的区别
1.DepencyManagement应用场景 当我们的项目模块很多的时候,我们使用Maven管理项目非常方便,帮助我们管理构建.文档.报告.依赖.scms.发布.分发的方法.可以方便的编译代码.进行 ...
- Bullet的学习资源(用Doxygen生成API文档)
Bullet 全称 Bullet Physics Library,是著名的开源物理引擎(可用于碰撞检测.刚体模拟.可变形体模拟),这里将bullet的学习资源整理一下,希望能帮助入门者少走弯路. 看下 ...
- iOS 9正式版开始推送 升级机型非常广泛
北京时间今日零时,苹果正式推送了iOS9,对于iPhone和iPad来说这一版系统升级都有很多重要改进,而升级的机型也非常宽泛,甚至连2011年的iPad 2与iPhone 4s都获得了支持,所以广大 ...
- PHP character garbled
MySql 控制台查询时出现乱码 Database&Table 的字符集 于Mysql控制台显示的字符集不一样 右键单击mysql控制台边框 单击属性 查看当前代码页的字符集模式是否于数 ...
- OpenGL投影矩阵
概述 透视投影 正交投影 概述 计算机显示器是一个2D平面.OpenGL渲染的3D场景必须以2D图像方式投影到计算机屏幕上.GL_PROJECTION矩阵用于该投影变换.首先,它将所有定点数据从观察坐 ...
- vue 2.0版本----》常用代码说明
------------------------------------------代码不显示-------------------------------------------- [v-cloak ...