组件的生命周期分为初始化阶段,运行中阶段,销毁阶段.不同阶段可以触发不同的函数运行.
初始化阶段函数:
getDefaultProps: 每个组件只调用一次
getInitialState: 每个实例初始化时调用
componentWillMount: render之前运行
render
componentDidMount: render之后,并且整个组件渲染完之后才会触发
例: 实例化两个组件,测试每个函数运行的时间
<script type="text/babel">
var count = 0;
var InitialTest = React.createClass( {
getDefaultProps: function () {
console.log("getDefaultProps");
},
getInitialState: function () {
console.log("getInitialState");
return null;
},
componentWillMount: function () {
console.log("componentWillMount");
},
render: function () {
console.log("render");
return (
<div>Hello I am Render</div>
);
},
componentDidMount: function () {
console.log("componentDidMount" + count++);
}
});
ReactDOM.render(
<div>
<InitialTest />
<InitialTest />
</div>,
document.getElementById("content")
);
</script>
测试结果为:
getDefaultProps //第一个运行,并且不管实例化几个对象,都只运行这一次
getInitialState //每实例化一次,就运行一次,常用来初始化数据
componentWillMount // 每实例化一次,就运行一次
render // 每实例化一次,就运行一次
getInitialState
componentWillMount
render
componentDidMount // 每实例化一次,运行一次,并且是等该组件渲染完之后才运行
componentDidMount
运行中阶段函数:
componentWillReceiveProps 由父组件传入的属性发生变化时运行
shouldComponentUpdate 返回false时,render不会调用
componentWillUpdate 发生改变会运行,不能修改属性和状态
render
componentDidUpdate 可以用来修改DOM
例: 测试每个函数运行时间,建立两个控件,HelloWorld组件实现文本Hello, XXX, 设置XXX为属性name,当name为空,
返回World,否则返回XXX. InputHello是HelloWorld的父组件,设置一个InputHello的状态
input传入HelloWorld的name属性,InputHello除了实现HelloWorld功能外,实现一个 input框
,当input改变时,input改变,从而HelloWorld的属性name跟着改变.
<script type="text/babel">
var HelloWorld = React.createClass({
componentWillReceiveProps: function (newObj) {
console.log("componentWillReceiveProps");
},
shouldComponentUpdate: function () {
console.log("shouldComponentUpdate");
return true;
},
componentWillUpdate: function () {
console.log("componentWillUpdate");
},
render: function () {
console.log("render");
return <p>Hello, {this.props.name ? this.props.name : "World"}</p>;
},
componentDidUpdate: function() {
console.log("componentDidUpdate");
($(ReactDOM.findDOMNode(this)).append("--Append--"))
}
});
var InputHello = React.createClass({
getInitialState: function () {
return {input: ''};
},
handleChange: function (event) {
this.setState({name: event.target.value});
},
render: function () {
return <div>
<HelloWorld name={this.state.input}></HelloWorld>
<br/>
<input type="text" onChange={this.handleChange} />
</div>
}
});
ReactDOM.render(
<div>
<InputHello />
</div>,
document.getElementById("content")
);
</script>
从input框中输入文本,控制台输出结果顺序为:
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
render
componentDidUpdate