文章30 | 阅读 13759 | 点赞0
对于任何一个框架,或者组件而言,都有其生命周期的定义,比如从定义到销毁,会有一定的流程在其中控制,以前我们接触过IONIC, 不得不说这个框架对生命周期的定义是非常完美的,也为开发者提供了很多的便利。
那么,对于React而言,是基于Component的一个框架,那么我们今天来谈谈Componet的生命周期是一个什么样的状态呢?
组件的生命周期分成三个状态:
React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用,三种状态共计五种处理函数。
此外,React 还提供两种特殊状态的处理函数。
对于常用前端框架的同学,不难看出,React的生命周期定义是不是很完美,个人感觉不差于IOS的object-c ,swift, 还有html5的IONIC, 当然这也只是个人看法,勿喷。
理论固然空虚,还是上代码吧,哈哈
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
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>
);
}
});
React.render(
<Hello name="world"/>,
document.body
);
上面代码在hello组件加载以后,通过 componentDidMount 方法设置一个定时器,每隔100毫秒,就重新设置组件的透明度,从而引发重新渲染。
这里也做一个小小的延伸,在React中我们定义class,要用className来定义,因为class是关键字哦。
还有 style的写法也不同,看看上面代码你就明白了!
怎么样,了解了吗?
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/jiangbo_phd/article/details/51755833
内容来源于网络,如有侵权,请联系作者删除!