一、什么是生命周期
组件本质上是状态机,输入确定,输出一定确定。
状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出响应。
组件的生命周期分为初始化阶段、运行中阶段、销毁阶段。
二、初始化阶段
根据编写的组件代码生成组件化实例。
1.可以使用的钩子函数
getDefaultProps:获取实例的默认属性。只调用一次,实例之间共享应用。
getInitialState:获取实例的初始化状态。初始化每个实例特有的状态。
componentWillMount:组件即将被渲染。render之前最后一次修改状态的机会。
render:组件再render函数中生成虚拟的DOM,也就是JXS,最后由render将虚拟的DOM节点渲染成真正的DOM节点。只能访问this.props和this.state,只有一个顶层组件,不允许修改状态和DOM输出。
componentDidMount:组件被装载后调用,组件已经被渲染到页面上。成功render并渲染完成真实DOM之后触发,可以修改DOM。
触发顺序由上到下。
2.实例
2.1查看触发顺序
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { DatePicker } from 'antd';
import { Menu, Dropdown, Icon } from 'antd';
var HelloWorld = React.createClass({
getDefaultProps:function(){
console.log("getDefaultProps,1");
},
getInitialState:function(){
console.log("getInitialState,2");
return null;
},
componentWillMount:function(){
console.log("componentWllMount,3");
},
render:function(){
return <p ref="childp">Hello,{(function (obj){
console.log("render,4");
if (obj.props.name) {
return obj.props.name
}else {
return "World"
}
})(this)}</p>
},
componentDidMount:function(){
console.log("componentDidMount,5");
},
});
ReactDOM.render(
<div><HelloWorld></HelloWorld></div>,
document.getElementById('root')
);