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 ...
随机推荐
- C# 从串口读取数据
最近要做系统集成,需要从串口读取数据,随学习一下相关知识: 以下是从串口读取数据 public static void Main() { SerialPort mySerialPort = new S ...
- 【NOIP】提高组2015 子串
[题意]求从字符串A中取出k个互不重叠的非空子串顺序拼接形成B的方案数.n<=1000,m<=100,k<=m. [算法]动态规划 [题解]这题主要是将从i-l转移变成从i-1转移, ...
- 【Luogu】P3930 SAC E#1 - 一道大水题 Knight
[题目]洛谷10月月赛R1 提高组 [题意]给定n*n棋盘和<=16个棋子,给几个棋子种类和攻击范围,现我方只有一马,求能否吃王. [算法]状压+BFS [题解]16种棋子中,马不能吃马,直接处 ...
- urllib3使用指南
对比urllib,用urllib3处理http请求十分方便,可以嵌入web服务后端用于访问其它web实例提供的接口 一.安装 pip install urllib3 二.初始化 导入urllib3 i ...
- 宿主机mount虚拟机镜像文件
转载 mount挂载虚拟机镜像文件 使用mount挂载ubuntu虚拟机所在的img文件的时候,执行: “sudo mount -o loop xxx.img /mnt/xxx”, 系统提示: “mo ...
- linux编程之消息队列
消息队列是内核地址空间中的内部链表,通过linux内核在各个进程之间传递内容,消息顺序地发送到消息队列中,并且以几种不同的方式 从队列中获取,每个消息队列可以用IPC标识符唯一的进行标识,内核中的消息 ...
- Windows 10又现新Bug，24核心竟卡成蜗牛
Windows 10又现新Bug,24核心竟卡成蜗牛 https://news.cnblogs.com/n/573996/
- ==和equals()方法的区别
==和equals()方法的区别 这是一道经典的面试题,但是很多人对其一直很困惑,最近刚好复习了他们两者的区别,现总结如下: 一.==:两端可以存放不同的数据 1.放基本数据类型:根据基本数据 ...
- Python图像处理库(2)
1.4 SciPy SciPy(http://scipy.org/) 是建立在 NumPy 基础上,用于数值运算的开源工具包.SciPy 提供很多高效的操作,可以实现数值积分.优化.统计.信号处理,以 ...
- mybatis官网学习
javaType:一个 Java 类的完全限定名,或一个类型别名(参考上面内建类型别名 的列表) .如果你映射到一个 JavaBean,MyBatis 通常可以断定类型. 然而,如果你映射到的是 Ha ...