需求:h5 按钮 交互 倒计时5秒钟之后 显示“下一步”操作,并且在5秒内按钮被禁止操作

1.定义初始值,使用useSafeState
它的用法与 React.useState 完全一样,但是在组件卸载后异步回调内的 setState 不再执行,避免因组件卸载后更新状态而导致的内存泄漏。

const [state,setState]=useSafeState(5)

2.定时器方法

useEffect(()=> {
    let timers = 5
     setInterval(() => {
       const num= timers --
       setState(num)
       if (num < 0) {
         clearInterval(num)
         setState('下一步')
     }, 1000)
  },[])
<Button
   className='view-btn'
   disabled={state!=="下一步"? true: false} // true 禁止点击
   onClick={()=>console.log('点击事件')}
   plain={state!=="下一步"? true : false} 
   {state}
</Button>
 import useSafeState from "react-use-safe-state" ;
const [ state , setState ] = useSafeState ( initalValue ) ;
 [![Travis][build-badge]][build][![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]
componentDidMount() {
    this.interval = setInterval(() => this.setState({ time: this.timestampToTime(new Date().getTime()) }), 1000);
componentWillUnmount() {
    clearIn.
				
React实现倒计时 import { View } from "@tarojs/components"; import React, { useEffect, useState } from "react"; interface Props { year: number; month: number; day: number; hour: number; min: number; second: number; export const CountDown: React.F
基本思路: 组件实例会保存一个 timeString 状态,用于该评论显示发布了多久。通过接受props.Eachdata 里面的 createdTime 调用handleTime函数来渲染更新这个 :计算当前时间和评论发布时间的时间差,如果已经发布 60 以上就显示分钟,否则就显示。 import React from 'react'; class CommentList extends React.Component { constructor
示例:定时5更新一下时间 时间是不会自动更新的。除非你手动刷新页面,否则永远显示“1 前”。我们可以在 componentWillMount 中启动一个定时器,每隔 5 调用一下 _referdata,让它去通过 setState 更新 : componentDidMount=()=>{ //定时器 setInterval(() => { this._referdata() }, 5000); componentWil