1 组件的生命周期可分为三个状态:
Mounting:组件挂载,已插入真实DOM
updating:组件更新,正在被重新渲染
unmounting:组件移出,已移出真实DOM
2 组件的生命周期可分成四个阶段:
创建,实例化,更新,销毁
<script type="text/babel"> //在此写React代码 var Demo = React.createClass({ /* 一,创建阶段 流程: 只调用getDefaultProps方法 */ getDefaultProps:function () { //在创建的时候调用,设置this.props的默认值 console.log("getDefaultProps"); return {}; }, /* 二 实例化阶段 流程: getInitialState componentWillMount render componentDidMount */ getInitialState: function () { //设置this.state的默认值 console.log("getInitialState"); return null; }, componentWillMount:function () { //在render之前调用 console.log("componentWillMount"); }, render:function () { //渲染并返回一个虚拟DOM console.log("render"); return <div>hello react</div> }, componentDidMount:function () { //render之后调用 //在该方法中,React会使用render方法返回的虚拟DOM对象创建真是的DOM结构 //可以在这个方法中读取DOM节点 console.log("componentDidMount"); }, /* 三 更新阶段 流程: componentWillReceiveProps shouldComponentUpdate 如果返回值是false,后三个方法不执行 componentWillUpdate render componentDidUpdate */ componentWillReceiveProps:function () { console.log("componentWillReceiveProps"); }, shouldComponentUpdate:function () { console.log("shouldComponentUpdate"); return true; }, componentWillUpdate:function () { console.log("componentWillUpdate"); }, componentDidUpdate:function () { console.log("componentDidUpdate"); }, /* 四 销毁阶段 流程: componentWillUnmount */ componentWillUnmount:function () { console.log("componentWillUnmount"); } }); //第一次创建并加载组件 ReactDOM.render( <Demo />, document.getElementById("container") ); </script>