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 ...
随机推荐
- 完全背包问题入门 （dp）
问题描述: 有n种重量和价值分别为Wi,Vi的物品,从这些中挑选出总重量不超过W的物品,求出挑选物品的价值总和的最大值,每种物品可以挑选任意多件. 分析: 令dp[i+1][j]表示从前i件物品中挑选 ...
- 获取子iframe框架的元素
我们常常遇到使用iframe框的时候,该iframe框不能根据自己内部的内容撑起来的这种问题 必要条件:不能在跨域的情况下...本地可以放到localhost下进行测试 //父页面index.html ...
- linux网络编程之IO函数
Linux操作系统中的IO函数主要有read(),write(),recv(),send(),recvmsg(),sendmsg(),readv(),writev(). 接收数据的recv()函数 # ...
- VM虚拟机，Linux系统安装tools过程遇到 what is the location of the “ifconfig” program
安装步骤: 复制到/mnt 解压文件 tar -zxvf VMwareTools-10.1.6-5214329.tar.gz 进入减压文件夹后安装 ./vmware-install.pl ... 一直 ...
- API(全局配置，全局API)
全局配置 Vue.config是一个对象,包含Vue的全局配置 silent 类型:boolean 默认值:false 用法 Vue.config.silent=true 取消Vue所有的日志与警告 ...
- 给mongodb设置密码权限
昨天装了个mongodb数据库用于测试用,装好后没有密码,现在就讲讲怎么设置密码 1.首先进入C:\mongodb\bin下面运行mongod.exe启动数据库. 2.在相同目录下启动mongo.ex ...
- LVS负载均衡DR模式
什么是集群? 一组相互独立的计算机,利用高速通信网络组成的一个计算机系统,对于客户机来说像是一个单一服务器,实际上是一组服务器.简而言之,一堆机器协同工作就是集群.集群的基本特点:高性能.高并发.高吞 ...
- FineReport——插入行策略
1.空值是默认的选项,即每次插入新行时,格子都是空白的. 2.原值即单元格中原有内容是什么,就复制到新增的格子中,一般适用于单元格是使用公式定义的, 在插入单元格时,公式会保留下来. 3.默认值即通过 ...
- jQuery为多个元素绑定同一个事件
$('.toals,input[type=datetime]').on('focus',function(){ $('.footer-focus-none').css('display','none' ...
- java - 线程1打印1-10，当线程打印到5后，线程2打印“hello”,然后线程1继续打印
public class T { private static int a =1;//1代表线程1 2线程2 public static void main(String[] args) { fina ...