自定义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"));

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

相关推荐

TypeScript:接口(interface)属性的定义

  在TypeScript里,接口扮演了一个定义数据结构的角色,它在TypeScript的类型检查中起到很重要的作用。基本用法匿名定义sayHello(person: {name:string}) { console.log(person.name + ", 您好!"); } 这是一个很简单的例子,它使用匿

React 16.2:Fragments语法的使用

React 16.2最大的变化是新增了fragments特性,fragments语法。示例:返回一首诗的片段敬请阅读 <h2>面朝大海,春暖花开</h2> <p>从明天起,做一个幸福的人</p> <p>喂马、劈柴,周游世界</p> <p>...</> React 16之前的版本在Re

Kotlin:类的定义

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

在React JSX内部执行循环

这里实现一个表格组件来演示如何在React的JSX内部执行循环。案例假设有一个表格组件,和一个行组件<ObjectRow />,现在需要在表格组件里循环生成行组件<ObjectRow />。是不能直接在jsx里使用for循环,这里介绍两种方法:map函数和立即执行函数。方法一:使用map函数render: function ()&nb

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

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

Python定义全局变量

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

React Apollo入门

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

理解React Native的Props和State

Props和State是React Native分别用来控制组件中两种不同类型的数据。Propsprops是Properties的简写,称为属性。props的特点是在组件内它是不可变,或者说不能被修改。在React数据流是单向的,从父组件到子组件的方向传递。props就是组件从父组件接收的数据,在组件内部是不能对它修改。props不可变的特性是有助于我们写可复用的组件。我们只需要对一个组

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

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