React定时内循环

怼烎@ 2022-05-26 10:06 180阅读 0赞

import React, \{ Component \} from 'react';

import logo from './logo.svg';

import './App.css';

class App extends Component \{

state= \{

text: '',

i: 0,

\}

componentDidMount() \{

//this.timer = setInterval(this.tick.bind(this), 50); //或

this. timer = setInterval(() => this. textline(), 1000);

\}

componentWillUnmount() \{

clearInterval( this. timer);

\}

textline () \{

let str = '字逐个逐个蹦出来';

str. split( " ");

if( this. state. i < str. length)\{

console. log( str\[ this. state. i\]);

this. setState(\{

text: this. state. text \+ str\[ this. state. i\]

\})

this. state. i\++;

\}

\}

render() \{

return (

< div className= "App" >

< header className= "App-header" >

< img src= \{  logo \} className= "App-logo" alt= "logo" />

< h1 className= "App-title" >流水字 </ h1 >

</ header >

< p className= "App-intro" >

\{this. state. text \}

</ p >

</ div >

);

\}

\}

export default App;

[`WindowOrWorkerGlobalScope`][WindowOrWorkerGlobalScope] 的 `setInterval() `方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

#### 组件加载: componentDidMount ####

componentDidMount()

这个方法会在组件加载完毕之后立即执行。在这个时候之后组件已经生成了对应的DOM结构，可以通过`this.getDOMNode()`来进行访问。

如果你想和其他JavaScript框架一起使用，可以在这个方法中执行`setTimeout`, `setInterval`或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentDidMount: function() {
      setTimeout(function() {
        this.setState({items: {name: 'test'}})
      }, 1000)
    }

####  componentWillUnmount ####

在组件从DOM unmount后立即执行.

componentDidMount:function(){
        this.inc = setInterval(this.update,500)
    },
    componentWillUnmount:function(){
        console.log("goodbye cruel world!")
        clearInterval(this.inc)
    }

主要用来执行一些必要的清理任务。例如清除`setTimeout`等函数，或者任意的在`componentDidMount`创建的DOM元素。

[WindowOrWorkerGlobalScope]: https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关循环外声明变量和循环内声明变量

网上部分博客提到，在for循环外部声明变量，for循环内部给变量赋值，能减少变量的声明，看上去似乎很有道理，其代码如下： public class MainTest

男娘i/ 2024年04月03日 12:32/ 0 赞/ 121 阅读

相关 js设置定时循环执行某任务

上一篇文章介绍了在一个固定的时间点来执行某个任务，这次通过javascript的方法来设置定时循环执行某任务。方法之一就是使用setInterval来处理，设定时间重复执行。

青旅半醒/ 2024年03月16日 21:07/ 0 赞/ 71 阅读

相关 PHP定时任务 - PHP自动定时循环执行任务实例代码

PHP定时任务已使用测试，现在已经趋于稳定，效果良好。本功能需要配合监控宝，360监控等使用。创建监控WEB项目，指定到任务主文件URL！如果没有Memcache可以创建tex

末蓝、/ 2023年08月17日 17:16/ 0 赞/ 165 阅读

相关 React 循环

/\循列表环循环就用 this.props.data.map( (item,index) => \{ return <li key=\{index\}>\{ite

傷城~/ 2022年12月27日 04:43/ 0 赞/ 139 阅读

相关 MySQL 定时循环同步数据到clickHouse

1、安装TreeSoft软件后，登录并分别配置MySQL、clickHouse连接信息，并测试连接成功！ ![watermark_type_ZmFuZ3poZW5naGVpd

红太狼/ 2022年12月01日 11:54/ 0 赞/ 279 阅读

相关定时循环连接wifi

1、查看连过的wifi netsh wlan show profiles 2、根据第一步得到的网络名，设置断开网络，再重连 netsh wlan

小灰灰/ 2022年09月08日 14:57/ 0 赞/ 221 阅读

相关 React定时内循环

import React, \{ Component \} from 'react'; import logo from './logo.svg'; import './A

怼烎@/ 2022年05月26日 10:06/ 0 赞/ 181 阅读

相关 react-native中实现定时任务

react-native中有时候需要定时执行一些后台任务,比如定时发送消息,定时统计数据等.这个时候就需要使用另外注册一个视图来做这些东西了,不然在同步任务中做这些任务,一旦任

港控/mmm°/ 2022年05月25日 10:50/ 0 赞/ 336 阅读

相关 react 的死循环

在 componentWillUpdate 中通过 this.setState 修改状态值，可能会导致死循环，因为会调用 shouldComponentUpdate 可以通

「爱情、让人受尽委屈。」/ 2021年12月23日 12:17/ 0 赞/ 640 阅读

相关【js】用js定时循环执行语句和定时延缓执行

最近在项目中，需要使用到站内信的消息推送方式在网站中给用户推送消息，就是在页面有下角推送一个弹窗，这里需要我们定时去后台查询是否有消息推送过来，所以需要在JS层

Bertha 。/ 2021年06月24日 15:58/ 0 赞/ 371 阅读