react es6 定时刷新模块

悠悠 2023-06-12 08:35 12阅读 0赞

## react 定时刷新模块 ##

完整代码

import React from 'react'
    export default class Dom extends React.Component<any, any> { 
        constructor(props: any) { 
            super(props)
        }
        state = { 
            reload: false
        }
        timer
        resizeHandler
        componentDidMount() { 
            this.getData()
            this.resizeHandler = _.debounce(this.handleResize, 500) // 防抖, 当窗口大小改变
            window.addEventListener('resize', this.resizeHandler)
            this.timer = setInterval(() => this.handleResize(), this.state.refreshTimeValue * 1000)
            this.initializationWs()
            this.queryHistoryPushMessage()
            store.clearHis()
        }
    
        componentWillUnmount() { 
            window.removeEventListener('resize', this.resizeHandler)
            if (this.timer) { 
                clearInterval(this.timer)
            }
        }
    
        getData = () => { 
           // 更新数据
        }
        
        handleResize = () => { 
            if (this.getMapData) { 
                this.setState({ 
                    reload: true
                })
            } else { 
                this.setState({  reload: false })
            }
        }
        
        render() { 
            const dom = (
                <div/>
            )
            return (
                  { this.state.reload && dom}
            )
        }
    }

使用的是typescript语法

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript ES6 模块

JavaScript ES6 模块是 JavaScript 语言的一项新功能，它允许你将代码分割成单独的文件，并使用 import 和 export 关键字在文件之间进行输入/

约定不等于承诺〃/ 2024年03月25日 15:50/ 0 赞/ 141 阅读

相关 JavaScript ES6 模块

JavaScript ES6 模块是 JavaScript 语言的一项新功能，它允许你将代码分割成单独的文件，并使用 import 和 export 关键字在文件之间进行输入/

不念不忘少年蓝@/ 2024年03月25日 11:34/ 0 赞/ 120 阅读

相关 react es6 定时刷新模块

react 定时刷新模块完整代码 import React from 'react' export default class Dom extends

悠悠/ 2023年06月12日 08:35/ 0 赞/ 13 阅读

相关 Es6 模块化

默认导出与导入 // 创建了一个js文件，文件名module let a = 10; let b = 20; let c = 30;

超、凢脫俗/ 2022年12月06日 12:55/ 0 赞/ 263 阅读

相关 ES6模块化

文章目录一、模块化说明二、引入模块数据语法三、Babel的使用一、模块化说明模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小

r囧r小猫/ 2022年09月07日 14:59/ 0 赞/ 304 阅读

相关 React/React Native 的ES5 ES6写法对照表

很多React/React Native的初学者都被ES6的问题迷惑：各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component

川长思鸟来/ 2022年08月22日 14:29/ 0 赞/ 228 阅读

相关 ES6-模块

1. 模块化的标准（1）commonJS标准（node.js采用）（2）AMD标准（require.js采用）（3）ES6模块 2. 定义模块 export，可

以你之姓@/ 2022年05月15日 07:55/ 0 赞/ 301 阅读

相关 ES6 模块化

1/ 定义模块方法一：(对应的引入方法二) export const a = 1; export const b = 2; export l

男娘i/ 2022年04月13日 06:13/ 0 赞/ 389 阅读

相关 ES6--模块

概述在 ES6 前，实现模块化使用的是 RequireJS 或者 seaJS（分别是基于 AMD 规范的模块化库，和基于 CMD 规范的模块化库）。 ES6 引入

末蓝、/ 2021年08月13日 21:31/ 0 赞/ 507 阅读

相关 es6 es6规范模块打包es6语法js文件、模块导出导入

ES6 基于Babel、browserify模块化打包 1、生成package.json文件, npm init； name不能为大写和中

- 日理万妓/ 2021年07月24日 23:49/ 0 赞/ 608 阅读