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中使用React.createRef：更优雅的DOM引用方式
React提供了多种方式来引用DOM元素,其中React.createRef()是一种更为现代、更优雅的方式,在这篇文章中,我们将深入了解React.createRef()的应用,以及它为开发者带来的便利,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要给大家介绍了关于react-native滑动吸顶效果的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用react-native具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-06-06
本文主要介绍了React-router v6 实现登录验证流程，主要介绍了公共页面、受保护页面和登录页面，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了React setState数据更新机制的相关资料，帮助大家更好的理解和学习使用React框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要为大家介绍了React团队测试并发特性详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
本文通过代码给大家介绍了使用react-color实现前端取色器的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-11-11
这篇文章主要介绍了react循环数据的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
React中函数式组件的基本意义是,组件实际上是一个函数,不是类,下面就来给大家介绍一下关于React中函数组件的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了React组件间通信的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家介绍了JWT身份校验与React-router无缝集成的探讨解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
最新评论