自定义React Hooks(超时):useTimeout

使用useTimeout Hook,我们可以使用声明式方法来实现setTimeout。 

  1. 创建一个带有回调callback和延迟的Hook。 
  2. 使用useRef为callback创建一个ref。
  3. 两次使用useEffect。 一次用于记住最后一个回调,一次用于设置超时和清除。

示例:

const useTimeout = (callback, delay) => {
const savedCallback = React.useRef();
React.useEffect(() => {
function tick() {
savedCallback.current();
}
if(delay != null) {
let id = setTimeout(tick, delay);
return () => clearTimeout(id);
}
},[delay])
}

使用示例:

const ExampleTimerFiveSeconds = props => {
const [seconds, setSeconds] = React.useState(0);
useTimeout(() => {
setSeconds(seconds+1);
}, 5000);
return <p>{seconds}</p>
}
ReactDOM.render(<ExampleTimerFiveSeconds />, document.getElementById("root"));

版权声明:著作权归作者所有。

相关推荐

Spring Security自定义验证失败处理器AuthenticationFailureHandler

Spring Security的AuthenticationManager用来处理验证的请求,处理的结果分两种:验证成功:结果由AuthenticationSuccessHandler处理验证失败:结果由交给AuthenticationFailureHandler处理。在Spring Security内置了几种验证失败处理器:DelegatingAuthenticationFailureHandl

React Apollo入门

入门Apollo Client最简单的方法是使用Apollo Boost,它会给客户端配置推荐的设置。使用Apollo Boost创建app的内容包括缓存,本地状态管理以及错误处理。安装首先安装以下的软件包:npm install apollo-boost react-apollo graphql-tag graphq

Python定义全局变量

Python使用global指令来声明一个全局变量。示例globvar = 0 def set_globvar_to_one():     global globvar    # 在使用全局变量前,必须先声明为global    &nbs

html给文本输入框添加自定义的清除按钮

使用HTML 5,如果对清除按钮的样式不介意的话,可以使用search类型的输入框,它会提供一个默认的清除按钮<input type="search" placeholder="搜索" /> 如果想自定义清除按钮,则需要自己实现,这里使用jquery给出一个实现的方案:<!DOCTYPE h

Kotlin:类的定义

基本定义Kotlin使用关键词class定义类,如:class User { } 声明类主要包括三部分:类名:必选,类的名称,一般以大写字母开头。类头:可选,类头包括type parameter(如泛型),主构造(primary constructor)等。类体:可选,在Kotlin,类体是可选的,它有大括号{}括起来。类头和类体是可选的,一个最简单的类可