study
/
react
/
43th.html

<!DOCTYPE html>
<html>
<head>
	<title>react-声明周期+style示例</title>
    <meta charset="UTF-8" />
	<script src='node_modules/react/umd/react.development.js'></script>
	<script src='node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='node_modules/babel-standalone/babel.min.js'></script>

</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    class Hello extends React.Component{
        constructor(){
            super();
            this.state = {
                opacity:1
            };
        };

        componentDidMount () {
          console.log('组件完成挂载');
          this.timer = setInterval(()=>{
              var num = this.state.opacity;
              num -=0.05;
              if(num<0.1){
                  num =1;
              }
              this.setState({
                  opacity:num
              });
          },500)
        };
        componentWillUnmount(){
          console.log('在组件从 DOM 中移除的时候立刻被调用');
          clearInterval(this.timer);
        }

        render(){
            return (
                <div style={{opacity:this.state.opacity}}>
                    hello world
                </div>
                )
        }
    };

     ReactDOM.render(
          <Hello/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>