09 React每隔0.2s顔色變淡 之settimeOut變成setInterval

案例 每隔0.2s顔色變淡##

公共資料是放在state中的哦！

代碼如下

import React, { Component } from "react";
import { setTimeout } from "timers";
export default class Life extends Component {
    state={
       opacity:1
    }

     render(){
         let {opacity}=this.state  //解構
         console.log(1);

         setTimeout(() => {
             opacity-=0.1;
             if (opacity<=0){
                opacity=1
             }
             this.setState({
                 opacity:opacity
             })
         }, 200);

        //  因為state已發生改變  render就會執行
        // 是以  當  opacity的值發生改變    render函數就會執行  setTimeout就變成了每個0.2s循環一次
        // render 一上來就會執行   狀态改變就會執行
         return(
             <div style={{opacity:opacity}}> React學不會了  怎麼辦</div>
         )
     }
}      

注意一下 你不能夠直接去改變state中的值。

你要通過this.setDate({}) 這樣去改變哈

這個跟小程式是類似

03==>在React中寫類 第一{}代表裡面寫jsx 的二個代表寫對象{}

React學不會了 怎麼辦

遇見問題，這是你成長的機會，如果你能夠解決，這就是收獲。