zoukankan      html  css  js  c++  java
  • 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'

  • 相关阅读:
    100-days: twenty-four
    100-days: twenty-three
    100-days: twenty-two
    100-days: twenty-one
    100-days: twenty
    [NOI 2016]循环之美
    [NOI 2015]寿司晚宴
    [BZOJ 2655]calc
    [Codeforces 888G]Xor-MST
    [BZOJ 2839]集合计数
  • 原文地址:https://www.cnblogs.com/IwishIcould/p/12057355.html
Copyright © 2011-2022 走看看