<h1 id="example"></h1>
<h1>react组件的生命周期</h1>
<p>组件的生命周期可分为三个状态:
Mounting:已插入真实DOM;Updating:正在被重新渲染;Unmounting:已移出真实DOM。</p>
<p>以下实例在Hello组件加载以后,通过componentDidMount方法设置一个定时器。</p>
<script type="text/babel">
var Opacity = React.createClass({
getInitialState: function(){
return { opacity: 1 }
},
componentDidMount: function(){
this.timer = setInterval( function(){
var opacity = this.state.opacity;
opacity -= 0.02;
if( opacity < 0.1 ){
opacity = 1.0;
}
this.setState( { opacity: opacity } );
}.bind( this ),200 )
},
render: function(){
return (
<div style = {{opacity: this.state.opacity}} >
Hello { this.props.name }
</div>
)
}
});
ReactDOM.render(
<Opacity name="谢夏岭" />,
document.getElementById("example")
)
</script>
react——组件的生命周期
最新推荐文章于 2023-12-18 11:11:35 发布