首页 > 其他 > 详细

React每隔0.2s颜色变淡 之settimeOut变成setInterval

时间:2019-12-18 01:10:01      阅读:147      评论:0      收藏:0      [点我收藏+]

案例 每隔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学不会了 怎么办

React每隔0.2s颜色变淡 之settimeOut变成setInterval

原文:https://www.cnblogs.com/IwishIcould/p/12057320.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!