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 ...
随机推荐
- MyISAM和InnoDB的行格式ROW_FORMAT
MyISAM行存储 MyISAM有3种行存储格式:fixed / dynamic / compressed: 格式 说明 备注 fixed 只有当表不包含变长字段(varchar/varbina ...
- 【Atcoder】CODE FESTIVAL 2017 qual A D - Four Coloring
[题意]给定h,w,d,要求构造矩阵h*w满足任意两个曼哈顿距离为d的点都不同色,染四色. [算法]结论+矩阵变换 [题解] 曼哈顿距离是一个立着的正方形,不方便处理.d=|xi-xj|+|yi-yj ...
- 【洛谷 P3809】 【模板】后缀排序
题目链接 先占个坑,以后再补. \(SA\)的总结肯定是要写的. 等理解地深入一点再补. #include <cstdio> #include <cstring> const ...
- 土司论坛nc反弹神器使用方法
说明: PS:我本机是linux,因为没有服务器所以使用win7来演示．倘若你是windows可以在本机生成dll以后再放到服务器上面去执行dll即可反弹shell物理机ip:192.168.1.12 ...
- linux 3389连接工具Rdesktop
简单使用 工作机换成战斗机了,改用ubuntu,原来的windows7上东西笔记多,还不想重装.用rdesktop来远程连接windows: sudo apt-get install rdesktop ...
- 64_l4
libnormaliz-devel-3.1.4-2.fc26.i686.rpm 23-May-2017 00:24 31214 libnormaliz-devel-3.1.4-2.fc26.x86_6 ...
- perl_nc.pl
#!/usr/bin/perl use strict; use IO::Socket; use IO::Select; use Getopt::Std; my %option;getopts('lp: ...
- mongodb-linux-x86_64
卷 DataDisk 的文件夹 PATH 列表卷序列号为 4A8E-D95CD:.│ 1.txt│ GNU-AGPL-3.0│ MPL-2│ README│ THIRD-PARTY-NOTI ...
- 2017多校第8场 HDU 6133 Army Formations 线段树合并
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6133 题意:给你一棵n个节点的二叉树,每个节点有一个提交任务的时间,每个节点总的提交任务的罚时为:提交 ...
- JS函数和变量名称冲突
在JS中如果函数名与变量名冲突,JS是怎么执行的? <script> console.log(sum);//function sum(){} function sum(){} var su ...