React每隔0.2s颜色变淡 之生命周期 ，componentDidMount表示组件已经挂载

05案例 每隔0.2s颜色变淡###

componentDidMount表示组件已经挂载,可以进行DOM操作###

import React, { Component } from "react";

export default class Life extends Component {

    state={

       opacity:1

    }

    componentDidMount(){ //声明周期  表示组件已经挂载了

        let { opacity } = this.state  //解构

        setInterval(() => {

            opacity -= 0.1;

            if (opacity <= 0) {

                opacity = 1

            }

            this.setState({

                opacity

            })

            console.log(opacity);

        }, 200);

    }

     render(){

         let { opacity } = this.state  //结构

        //  因为state已发生改变  render就会执行

        // 所以  当  opacity的值发生改变    render函数就会执行  setTimeout就变成了每个0.2s循环一次

        // render 一上来就会执行   状态改变就会执行

         return(

             <div style={{ opacity  }}> React学不会了  怎么办</div>

         )

     }

}

使用

ReactDOM.unmountComponentAtNode(document.getElementById("root")) 报错

因为你没有引用

import ReactDOM from 'react-dom'