React 中组件的生命周期
先上代码, react 用的是 15.0.1
<!DOCTYPE html>
<html>
<head>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
<style type="text/css">
button{
margin-right: 16px;
}
</style>
</head>
<body>
<div id="container"></div> <script type="text/babel">
var Child = React.createClass({
getDefaultProps: function(){
console.log('order 1 ==> getDefaultProps Child');
return {}
}, getInitialState: function(){
console.log("order 5 ==> getInitialState Child");
return {
val: 100
}
}, componentWillMount: function(){
console.log("order 6 ==> componentWillMount Child");
}, componentDidMount: function(){
console.log("order 8 ==> componentDidMount Child");
}, // nextProps 是新的 Props
componentWillReceiveProps: function(nextProps) {
console.log( 'componentWillReceiveProps Child' );
}, shouldComponentUpdate: function() {
console.log("shouldComponentUpdate Child");
/*
这里若为 false,
则 触发更新的时候,
componentWillUpdate, render, componentDidUpdate
都不会触发
*/
return true;
}, componentWillUpdate: function() {
console.log("componentWillUpdate Child");
}, componentDidUpdate: function() {
console.log("componentDidUpdate Child");
}, componentWillUnmount: function() {
console.log("componentWillUnmount Child");
}, stateChange: function() {
this.setState({
val: this.state.val - 1
});
}, forceUpdateChild: function() {
this.forceUpdate();
}, render: function() {
console.log("order 7 ==> render Child");
return(
<div>
<p>{"Props:"} {this.props.num}</p>
<p>{"State:"} {this.state.val}</p>
</div>
);
}
}); var Parent = React.createClass ({
getDefaultProps: function(){
console.log('order 2 ==> getDefaultProps Parent');
return { }
}, getInitialState: function(){
console.log("order 3 ==> getInitialState Parent");
return {
num: 0
}
}, propsChange: function() {
this.setState({
num: this.state.num+1
});
}, componentWillUnmount: function() {
console.log("componentWillUnmount Parent");
}, stateChange: function() {
this.refs.rChild.stateChange();
}, forceUpdateChild: function() {
this.refs.rChild.forceUpdateChild();
}, unmountChild: function() {
// 这里卸载父组件也会导致卸载子组件
ReactDOM.unmountComponentAtNode(document.getElementById("container"));
}, forceUpdateParent: function() {
this.forceUpdate();
}, render: function() {
console.log("order 4 ==> render Parent");
return (
<div>
<button onClick={this.propsChange}>propsChange</button>
<button onClick={this.stateChange}>stateChange</button>
<button onClick={this.forceUpdateChild}>forceUpdateChild</button>
<button onClick={this.forceUpdateParent}>forceUpdateParent</button>
<button onClick={this.unmountChild}>unmount</button>
<Child ref="rChild" num={this.state.num}></Child>
</div>
);
}
}); ReactDOM.render(
<Parent></Parent>,
document.getElementById('container')
);
</script>
</body>
</html>
1. 初始化
由于 getDefaultProps 并不是在组件实例化时被调用的，是在 React.createClass 调用时就被调用来了，返回值会被储存起来。
输出结果:
order 1 ==> getDefaultProps Child
order 2 ==> getDefaultProps Parent
order 3 ==> getInitialState Parent
order 4 ==> render Parent
order 5 ==> getInitialState Child
order 6 ==> componentWillMount Child
order 7 ==> render Child
order 8 ==> componentDidMount Child
2. 点击按钮 propsChange
改变自己的 state里的num, 同时由于 Child组件的props引用了 state里的num, 所以有触发 componentWillReceiveProps
输出结果:
order 4 ==> render Parent
componentWillReceiveProps Child
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child
3. 点击按钮 stateChange
由于只改变了子组件的 state.
输出结果:
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child
4. 点击按钮 forceUpdateChild
输出结果:
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child
5. 点击按钮 forceUpdateParent
输出结果:
order 4 ==> render Parent
componentWillReceiveProps Child
shouldComponentUpdate Child
componentWillUpdate Child
order 7 ==> render Child
componentDidUpdate Child
6. 点击按钮 unmount
输出结果:
componentWillUnmount Parent
componentWillUnmount Child
最后来个流程图:
流程图参考地址: http://www.race604.com/react-native-component-lifecycle/
React 中组件的生命周期的更多相关文章
- reactjs入门到实战（七）---- React的组件的生命周期
React的组件的生命周期有三个状态分别是:挂载(生产组件示例化.准备挂载到页面.挂载到页面).更新(更新值.更新DOM).和卸载(卸载后). >>>其他 getInitia ...
- react native组件的生命周期
react native组件的生命周期 一.当页面第一次加载时,会依次调用: constructor() componentWillMount(): 这个函数调用时机是在组件创建,并初始化了状态之后, ...
- Android React Native组件的生命周期及回调函数
熟悉android的童鞋应该都清楚,android是有生命周期的,其很多组件也是有生命周期.今天小编和大家分享的React Native组件的生命周期,还不了解的童鞋,赶紧来围观吧 在android开 ...
- 【RN - 基础】之React Native组件的生命周期
下图描述了React Native中组件的生命周期: 从上图中可以看到,React Native组件的生命周期可以分为初始化阶段.存在阶段和销毁阶段. 实例化阶段 实例化阶段是React Native ...
- React Native 中组件的生命周期
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- React Native 中组件的生命周期（转）
概述 就像 Android 开发中的 View 一样,React Native(RN) 中的组件也有生命周期(Lifecycle).所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解生命 ...
- React Native组件、生命周期及属性传值props详解
创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...
- React：组件的生命周期
在组件的整个生命周期中,随着该组件的props或者state发生改变,其DOM表现也会有相应的变化.一个组件就是一个状态机,对于特定地输入,它总返回一致的输出. 一个React组件的生命周期分为三个部 ...
- Tomcat中组件的生命周期管理公共接口Lifecycle
Tomcat的组件都会实现一个Lifecycle接口,以方便组件的生命周期的统一管理 interface Lifecycle 组件生命周期中主要的几个方法 增加监听器,事件委托机制 public vo ...
随机推荐
- 用一个时钟在FPGA中计算直方图
直方图对数字数据的分析通常是一种有用的工具.不过,要从一个直方图获得可靠的结果,必须获得大量数据,通常是要10万到100万个点.如果需要分析一个ADC的数字输出,可以采用一片FPGA(图1). 图中显 ...
- bzoj 2200: [Usaco2011 Jan]道路和航线——拓扑+dijkstra
Description Farmer John正在一个新的销售区域对他的牛奶销售方案进行调查.他想把牛奶送到T个城镇 (1 <= T <= 25,000),编号为1T.这些城镇之间通过R条 ...
- bzoj 2276: [Poi2011]Temperature——单调队列
Description 某国进行了连续n天的温度测量,测量存在误差,测量结果是第i天温度在[l_i,r_i]范围内. 求最长的连续的一段,满足该段内可能温度不降 第一行n 下面n行,每行l_i,r_i ...
- OpenCVSSDpython目标探测对象检测
1.请参考大牛博客链接 https://www.aiuai.cn/aifarm822.html
- 父元素与子元素之间的margin-top问题(css hack)
hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. hytml代码: &l ...
- tornado 学习之GET POST方法 -- (转)
import torndb import tornado.web import tornado.ioloop from tornado.options import define,options,pa ...
- adb操作指令大全
adb是什么?:adb的全称为Android Debug Bridge,就是起到调试桥的作用.通过adb我们可以在Eclipse中方面通过DDMS来调试android程序,说白了就是debug工具.a ...
- LCD实验学习笔记（六）：存储控制器
s3c2440可使用地址空间为1GB(0x00000000到0x40000000). 1G空间分为8个BANK,每个BANK为128MB. 设27条地址线,和8个片选引脚(nGCS0-nGCS7). ...
- BootStrap 实现导航栏nav透明，nav子元素文字不透明
在给nav 的属性赋值 opacity:0.0透明度时会导致nav内子元素会继承opacity属性.此时再对子元素赋值opacity:1.0 时会导致 子元素实际opacity值为0.0*1.0=0. ...
- 如何设置WordPress文章特色图像（Featured Image）
WordPress的特色图像(Featured Image)是一个很方便的功能,过去为了给每篇文章设置一个缩略图,我们需要用脚本去匹配文章中的第一张或者最后一张图片,或者通过附件方式获取图片,有了特色 ...