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 ...
随机推荐
- python+selenium+js 处理滚动条
selenium并不是万能的,有时候页面上操作无法实现的,这时候就需要借助JS来完成了. 常见场景: 当页面上的元素超过一屏后,想操作屏幕下方的元素,是不能直接定位到,会报元素不可见的. 这时候需要借 ...
- Android中Handler导致的内存泄露
http://www.androiddesignpatterns.com/2013/01/inner-class-handler-memory-leak.html Consider the follo ...
- hdu5828 Rikka with Sequence
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=5828 [题解] 考虑bzoj3211 花神游历各国,只是多了区间加操作. 考虑上题写法,区间全为1打标记 ...
- UOJ#31 【UR #2】猪猪侠再战括号序列
传送门http://uoj.ac/problem/31 大家好我是来自百度贴吧的_叫我猪猪侠,英文名叫_CallMeGGBond. 我不曾上过大学,但这不影响我对离散数学.复杂性分析等领域的兴趣:尤其 ...
- UOJ#204 【APIO2016】Boat
Time Limit: 70 Sec Memory Limit: 256 MBSubmit: 559 Solved: 248 Description 在首尔城中,汉江横贯东西.在汉江的北岸,从西向 ...
- shell 给未定义的变量设定默认值 ${parameter:-word}
参考: [ Unix & Linux ] Shell Demo $echo ${JENKINS_VERSION:-2.7.4} 2.7.4 $JENKINS_VERSION=2.99 $ech ...
- 深入理解微服务架构spring的各个知识点（面试必问知识点）
什么是spring spring是一个开源框架,spring为简化企业级开发而生,使用spring可以使简单的java bean 实现以前只有EJG才能实现的功能. Spring是一个轻量级的控制反转 ...
- MSSQL数据库 "无法删除数据库 "***"，因为该数据库当前正在使用" 解决方案
--1 创建数据库 create database AAA --2 使用数据库 use AAA --3 在AAA数据库下创建table create table BBB ( bId ,) primar ...
- arch中pacman的使用
Pacman 是archlinux 下的包管理软件.它将一个简单的二进制包格式和易用的构建系统结合了起来.不管软件包是来自官方的 Arch 库还是用户自己创建,Pacman 都能方便得管理. pacm ...
- Python标准库笔记(4) — collections模块
这个模块提供几个非常有用的Python容器类型 1.容器 名称 功能描述 OrderedDict 保持了key插入顺序的dict namedtuple 生成可以使用名字来访问元素内容的tuple子类 ...