组件的生命周期分为三个状态：
1、Mounting 已插入真实DOM
2、Updating 正在被重新渲染
3、Unmounting 已移除真实DOM
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did函数在进入状态之后调用，三种状态共计5种处理函数
componentWillMount()
componentDidMount()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
例子：（定时器，不断的改变文字的透明度）
<!DOCTYPE html>
<html>
<head>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var Hello = React.createClass({
getInitialState : function(){
return {
opacity : 1.0
};
},
//在组件插入真实的DOM以后，执行componentDidMount方法
componentDidMount : function(){
this.timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -= 0.1;
if(opacity < 0.1){
opacity = 1.0;
}
this.setState({
opacity : opacity
});
}.bind(this),100);
},
render : function(){
return (
<div style={{opacity : this.state.opacity}}>
Hello World!
</div>
);
}
})
ReactDOM.render(
<Hello />,
document.getElementById('example')
);
</script>
</body>
</html>
993
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
