react es6 定时刷新模块

最新推荐文章于 2025-07-11 16:40:58 发布

litter吴

最新推荐文章于 2025-07-11 16:40:58 发布

阅读量2.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端知识文章标签： react

本文链接：https://blog.csdn.net/litter940505/article/details/102851487

前端知识专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一个使用React和Typescript实现的定时刷新模块。该模块通过设置定时器在指定时间间隔后触发组件状态更新，实现页面内容的周期性刷新。同时，文章展示了如何在窗口尺寸变化时防抖处理，以及如何在组件卸载时清除定时器，避免内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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语法