生命周期
生命周期图例：
组件生命周期相关：(九个生命周期接口)
最初始:
getDefaultProps
getInitialState
Mounting/组件挂载相关:
componentWillMount
componentDidMount
componentDidMount
Updating/组件更新相关:
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
Unmounting/组件移除相关:
componentWillUnmount
<!DOCTYPE html>
<html>
<body>
<script type="text/jsx">
var Component1 = React.createClass({
getDefaultProps: function(){
console.log('getDefaultProps')
},
getInitialState: function(){
console.log('getInitialState');
return null
},
componentWillMount: function(){
console.log('componentWillMount')
},
componentDidMount: function(){
console.log('componentDidMount')
},
componentWillReceiveProps: function(){
console.log('componentWillReceiveProps')
},
shouldComponentUpdate: function(){
console.log('shouldComponentUpdate');
return true;
},
componentWillUpdate: function(){
console.log('componentWillUpdate')
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
componentWillUnmount: function(){
console.log('componentWillUnmount')
},
render: function() {
return <div>我只是一个安静的div</div>
}
});
React.render(
<Component1 />, document.body
);
React.render(
<Component1 />, document.body
);
React.unmountComponentAtNode(document.body)
</script>
</body>
</html>
//执行结果为：
getDefaultProps
getInitialState
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount