<html>
<head>
<title>hello world React.js</title>
<script src="build_0.13/react.min.js"></script>
<script src="build_0.13/JSXTransformer.js"></script>
</head>
<body>
<div id="e"></div>
<script type="text/jsx">
var Hello = React.createClass({
getInitialState:function(){
return {opacity:1.0};
},
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 {this.props.name}
</div>
);
}
});
//添加组件到e中
React.render(
<Hello name="world" />,
document.getElementById("e")
);
</script>
</body>
</html>
组件的生命周期
组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。
componentWillMount()
componentDidMount()
componentWillUpdate(object nextProps, object nextState)
componentDidUpdate(object prevProps, object prevState)
componentWillUnmount()
此外，React 还提供两种特殊状态的处理函数。
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
React(0.13) 利用componentDidMount 方法设置一个定时器
原文：http://www.cnblogs.com/yuwensong/p/5325558.html