來來來案腺，生命周期來一波啰脚。
不總結(jié)那么細(xì)致殷蛇，單獨(dú)拿一個(gè)出來說。
下面代碼達(dá)到的效果是使文字漸隱漸顯橄浓，感覺像是動(dòng)畫的效果粒梦，其實(shí)只是簡單的改變了透明度帶來的視覺效果，感興趣的可以復(fù)制粘貼運(yùn)行一下荸实。
原理是在componentDidMount中設(shè)置定時(shí)器匀们，在組件渲染后根據(jù)定時(shí)器的設(shè)置每隔300 毫秒重新渲染一次，然后加了判斷語句准给，透明度小于0.1 的時(shí)候重新返回為1泄朴。
我這是一個(gè)封裝好的組件，如果誰需要拿代碼的話露氮，需要直接放進(jìn)React 項(xiàng)目中的祖灰。別忘了在入口文件引入組件才能正常渲染。
......如果看不懂上面那句話的小盆友畔规，請(qǐng)直接右上角點(diǎn)擊X退出局扶，這篇文章可能對(duì)你沒有任何幫助反而會(huì)因?yàn)榭吹奶鐜砘煜Ｄ銘?yīng)該做的是去菜鳥教程網(wǎng)叁扫，花點(diǎn)時(shí)間從上到下三妈，一點(diǎn)一點(diǎn)慢慢看。網(wǎng)址在這里陌兑，自己選擇沈跨。
http://www.runoob.com/react/react-tutorial.html
學(xué)習(xí)沒有捷徑，唯有腳踏實(shí)地兔综，一步一個(gè)腳印饿凛，才能走到你想去的遠(yuǎn)方。
那些聰明到飛起的天才畢竟是少數(shù)软驰，不在討論之列涧窒。
import React, { Component } from 'react';
// 封裝組件
class Hellow extends React.Component{
constructor(props){
super(props);
// 設(shè)置初始透明度為1
this.state = {opacity:1.0}
}
// 組件渲染后調(diào)用
componentDidMount(){
// 設(shè)置定時(shí)器并賦值給 timer
let timer = setInterval(function(){
// 為當(dāng)前透明度賦值為 opacity
let opacity = this.state.opacity;
// 設(shè)置 opacity每300毫秒 -=0.1，以區(qū)別顯示效果
opacity -= 0.1;
// 判斷透明度是否小于0.1锭亏，如果小于就變?yōu)?
if( opacity < 0.1 ){
opacity = 1.0;
}
// 設(shè)置需要改變的數(shù)據(jù)
this.setState({
opacity:opacity
});
// 在定時(shí)器中綁定this纠吴，確保每次this指向一樣
}.bind(this),300);
}
render(){
return(
// 將最新的 opacity 復(fù)制給當(dāng)前 opacity
<div style={{opacity:this.state.opacity}}>
{/* 從外部取name值 */}
Hellow{this.props.name}
</div>
);
}
}
export default Hellow;
