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