react 中使用setTimeout

zhoutao 发布于2019-08-20 18:19 / 2824人阅读

摘要：中使用做轮询由于是在内存中运行，所以即使是对象已经被销毁了，如果在组件卸载的时候没有清楚掉定时器，做循环还是会在内存中一直运行是指向定时器的指针每次执行都需要更新这个指针只有在表格数据返回之后才能再请求数据目标使用获取数据请求数据的方法如果

React中使用setTimeout

setTimeout做轮询

React由于是在内存中运行，所以即使是DOM对象已经被销毁了，如果在组件卸载(componentWillUnmount)的时候没有清楚掉定时器， setTimeout做循环还是会在内存中一直运行

    componentWillUnmount() {
        this.state.brush && clearTimeout(this.state.brush)
    }

2.this.state.brush是指向定时器的指针每次 setTimeout执行都需要更新这个指针

    brushData = (time = this.state.brushtime, formdata = {
        wfid: this.state.wfid,
        begintime: this.state.time
    }) => {
        var brush = setTimeout(this.brushData, time * 5 * 1000);
        this.setState({brush})
        // 只有在表格数据返回之后才能再请求数据
        this.state.tableLoading || this.getPageData({...formdata}, true)
    }

目标

使用setTimeout获取数据

请求数据的方法

getPageData = (formdata, brushing) => {
        // brushing 如果是自动轮询获取数据则brushing值为true 避免请求数据陷入死循环 这一步只能有submint事件触发 因为要更新表单值
        if (this.state.brushtime && !brushing) {
            // 保存表单值 以便setTImeout的回调函数(其实也就是getPageData)能取得请求数据时的参数
            formdata && this.setState({wfid: formdata.wfid, time: formdata.begintime});
            this.brushData(this.state.brushtime);
        } else {
            this.setState({tableLoading: true})
            if (!formdata) {
                // 初次加载
            } else {
                // 缓存当前页面选择的时间
            }
        }
    }

循环的方法

// brushData是回调函数 所以参数只能在当前作用域中取得
brushData = (time = this.state.brushtime) => {
        var brush = setTimeout(this.brushData, time * 5 * 1000);
        this.setState({brush})
        // 只有在表格数据返回之后才能再请求数据  并且在刷新页面数据的时候表单值传入null使请求数据的函数直接从state中取相应的表单值
        this.state.tableLoading || this.getPageData(null, true)
    }

GPU云服务器云服务器 react使用webrtc setTimeout javascript settimeout js定时器setTimeout

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84356.html

使用React.setState需要注意的三点

摘要：而不是在方法中在通过来获取使用回调函数方法接收一个作为回调函数。这样子直接输出，回调函数，对比如果默认为输入的结果是和渲染无关的状态尽量不要放在中来管理通常中只来管理和渲染有关的状态，从而保证改变的状态都是和渲染有关的状态。原文: https://medium.com/@mweststra...作者: Michel Weststrate 前言这篇文章原标题是3 Reasons w...

instein 2019-08-20 14:08 评论0 收藏0
深入理解Webpack核心模块Tapable钩子[异步版]

摘要：接上一篇文章深入理解核心模块钩子同步版中三个注册方法同步注册的是中对三个触发方法这一章节我们将分别实现异步的版本和版本异步钩子的版本的版本的版本异步的钩子分为并行和串行的钩子，并行是指等待所有并发的异步事件执行之后再执行最终的异步回调。接上一篇文章深入理解Webpack核心模块WTApable钩子(同步版) tapable中三个注册方法 1 tap(同步) 2 tapAsync(...

AlphaWallet 2019-08-23 15:31 评论0 收藏0
功能性组件和Classes有什么不同？

摘要：函数组件与类有何不同有一段时间，规范的答案是类可以访问更多功能如状态。那么功能性函数和类是否又根本的区别函数组件捕获的值。假设功能组件不存在。在我到目前为止看到的所有情况中，由于错误地假设功能不会改变或总是相同，所以会出现陈旧的封闭问题。 React函数组件与React类有何不同？有一段时间，规范的答案是类可以访问更多功能（如状态）。但是自从有了Hook后，这个答案变得不唯一了。也...

lmxdawn 2019-08-23 15:39 评论0 收藏0
功能性组件和Classes有什么不同？

摘要：函数组件与类有何不同有一段时间，规范的答案是类可以访问更多功能如状态。那么功能性函数和类是否又根本的区别函数组件捕获的值。假设功能组件不存在。在我到目前为止看到的所有情况中，由于错误地假设功能不会改变或总是相同，所以会出现陈旧的封闭问题。 React函数组件与React类有何不同？有一段时间，规范的答案是类可以访问更多功能（如状态）。但是自从有了Hook后，这个答案变得不唯一了。也...

GitCafe 2019-08-30 15:56 评论0 收藏0
功能性组件和Classes有什么不同？

摘要：函数组件与类有何不同有一段时间，规范的答案是类可以访问更多功能如状态。那么功能性函数和类是否又根本的区别函数组件捕获的值。假设功能组件不存在。在我到目前为止看到的所有情况中，由于错误地假设功能不会改变或总是相同，所以会出现陈旧的封闭问题。 React函数组件与React类有何不同？有一段时间，规范的答案是类可以访问更多功能（如状态）。但是自从有了Hook后，这个答案变得不唯一了。也...

peixn 2019-08-02 14:25 评论0 收藏0