React-Hook中使用useEffect清除定时器的实现方法
useEffect
之前我们学习了class组件的声明周期，那么我们想在函数式组件中做一些声明周期有关操作能否实现呢？
函数式组件中是没有生命周期的,所以就可以使用useEffect来替代。我们可以把useEffect看作组件加载、组件更新、组件卸载的三个生命周期方法的组合。
下面我们一起来通过案例学习useEffect的使用：
1.这里需求是写一个点击事件让state累加，并且吧state展示在title上
2.首先要导入React, { useState, useEffect }
3.然后使用 useEffect将state渲染给title
4.最后绑定点击事件
import React, { useState, useEffect } from 'react'
export default function App() {
const [state, setstate] = useState(0)
useEffect(() => {
document.title = `你点击了${state}次`
})
return (
<div>
<h1>{state}</h1>
<button onClick={e => setstate(state + 1)}>点击</button>
</div>
)
}查看运行效果：
所以我们可以发现：默认情况下,useEffect会在第一次渲染之后和每次更新之前都会执行
基于它的这个特性，我们再来看一个例子：
1.实现的效果是，点击按钮能切换状态是否显示page页面，page页面的按钮能够控制age和money的改变，比较简单，大家应该都能看懂
import React, { useState, useEffect } from 'react'
function Page() {
const [age, setage] = useState(18)
const [money, setmoney] = useState(1000)
useEffect(() => {
console.log('我被执行了')
})
return (
<div>
<h1>{age}</h1>
<h2>{money}</h2>
<button onClick={e => setage(age + 1)}>长大</button>
<button onClick={e => setmoney(money + 1000)}>变有钱</button>
</div>
)
}
export default function App() {
const [show, setshow] = useState(true)
return (
<div>
<h1>{show}</h1>
<button onClick={e => setshow(!show)}>切换状态</button>
{show && <Page/>}
</div>
)
}我这里在useEffect中进行了打印，下面我们来看看何时会触发useEffect
可以看到每次更新的时候都会触发useEffect，这里的useEffect还可以传入参数，例如：
在后面的数组中写入age和money，实现的效果是一样的
useEffect(() => {
console.log('我被执行了')
}, [age, money])
但是如果只写一个：
useEffect(() => {
console.log('我被执行了')
}, [age])查看结果：
可以看到age状态发生改变时它会被调用，但是money发生改变，他并不会调用
所以这里数组传入是依赖项,只有数组中的状态发生了变化,才会去触发useEffect执行
如果我们想在useEffect中进行请求，也就是只想它触发一次，应该怎么做呢：
如下使用空数组即可：
useEffect(() => {
console.log('我被执行了')
}, [])
useEffect清除定时器
先来回顾一下在class组件中如何清除定时器：
如以下代码，需要在componentWillUnmount生命周期函数中进行定时器的清除操作
export class App extends Component {
state = {
count: 0
}
componentDidMount() {
this.timer = setInterval(() => {
this.setState({count: this.state.count + 1})
}, 500)
}
componentWillUnmount() {
clearInterval(this.timer)
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
</div>
)
}
}
那么使用useEffect该如何去实现呢？
只需要return出去就可以了，看下面代码
import React, { useState, useEffect } from 'react'
export default function App() {
const [state, setstate] = useState(0)
useEffect(() => {
const timer = setInterval(() => {
setstate(prev => prev + 1)
}, 1000)
// 清除定时器
return () => clearInterval(timer)
}, [])
return (
<div>{state}</div>
)
}最后
本篇文章的讲解就到这里啦，主要介绍了useEffect的功能以及使用方法，还有如何使用他清除定时器，如果对你有帮助，点赞关注支持下呀~后续还会给大家带来更多优质内容
到此这篇关于React-Hook中useEffect详解(使用useEffect清除定时器)的文章就介绍到这了,更多相关react Hook useEffect清除定时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
react函数组件useState异步,数据不能及时获取到的问题
这篇文章主要介绍了react函数组件useState异步,数据不能及时获取到的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
在使用langchain的ReactAgent遇到问题后,作者尝试自定义ReactAgent实现,通过详细分析langchain中的agent功能和问题,结合React思想,作者设计了新的agent逻辑并在GitHub上分享了代码,新的ReactAgent通过改进prompt和工具调用逻辑,提升了任务执行的效果和稳定性2024-10-10
Refs是一个 获取 DOM节点或React元素实例的工具,在React中Refs 提供了一种方式,允许用户访问DOM 节点或者在render方法中创建的React元素,这篇文章主要给大家介绍了关于React中refs的一些常见用法,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了react-router 路由切换动画的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
本篇文章主要介绍了浅谈react受控组件与非受控组件(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了React从Class方式转Hooks详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-09-09
这篇文章主要介绍了react实现换肤功能的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
本篇文章主要介绍了浅谈使用React.setState需要注意的三点，提出了三点对 React 新手来说是很容易忽略的地方，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-12-12
在React中,条件渲染是根据不同的条件选择性地渲染组件,本文介绍了三种常见的条件渲染方式：使用if语句、使用三元运算符和使用短路运算符,通过这些方法,我们可以根据应用的状态和用户的操作动态地显示不同的内容,从而提升用户体验和组件的可维护性2025-02-02
这篇文章主要介绍了详解在React项目中安装并使用Less（用法总结），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论