<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)：组件判断是否重新渲染时调用
时间： 2024-10-31 00:20:29