componentDidMount 用法

来来来，生命周期来一波。
不总结那么细致，单独拿一个出来说。
下面代码达到的效果是使文字渐隐渐显，感觉像是动画的效果，其实只是简单的改变了透明度带来的视觉效果，感兴趣的可以复制粘贴运行一下。
原理是在componentDidMount中设置定时器，在组件渲染后根据定时器的设置每隔300 毫秒重新渲染一次，然后加了判断语句，透明度小于0.1 的时候重新返回为1。
我这是一个封装好的组件，如果谁需要拿代码的话，需要直接放进React 项目中的。别忘了在入口文件引入组件才能正常渲染。
......如果看不懂上面那句话的小盆友，请直接右上角点击X退出，这篇文章可能对你没有任何帮助反而会因为看的太早带来混淆。你应该做的是去菜鸟教程网，花点时间从上到下，一点一点慢慢看。网址在这里，自己选择。
http://www.runoob.com/react/react-tutorial.html
学习没有捷径，唯有脚踏实地，一步一个脚印，才能走到你想去的远方。
那些聪明到飞起的天才毕竟是少数，不在讨论之列。

import React, { Component } from 'react';
// 封装组件
class Hellow extends React.Component{
    constructor(props){
        super(props);
        // 设置初始透明度为1
        this.state = {opacity:1.0}
    }
    // 组件渲染后调用
    componentDidMount(){
        // 设置定时器并赋值给 timer
        let timer = setInterval(function(){
            // 为当前透明度赋值为 opacity
            let opacity = this.state.opacity;
            // 设置 opacity每300毫秒 -=0.1，以区别显示效果
            opacity -= 0.1;
            // 判断透明度是否小于0.1，如果小于就变为1
            if( opacity < 0.1 ){
                opacity = 1.0;
            }
            // 设置需要改变的数据
            this.setState({
                opacity:opacity
            });
        // 在定时器中绑定this，确保每次this指向一样
        }.bind(this),300);
    }

    render(){
        return(
            // 将最新的 opacity 复制给当前 opacity
            <div style={{opacity:this.state.opacity}}>
            {/* 从外部取name值 */}
                Hellow{this.props.name}
            </div>
        );
    }
}

export default Hellow;