React-Hook中使用useEffect清除定时器的实现方法

目录
  • useEffect
  • 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清除定时器内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React函数式组件Hook中的useEffect函数的详细解析

    目录 前言 useEffect的作用 useEffect的使用? 1.class组件 2.函数式组件 总结 前言 React函数式编程没有生命周期,因此需要借助useEffect来实现. useEffect的作用 发ajax请求获取数据 设置订阅/获取定时器 手动更改真实DOM useEffect的使用? 1.class组件 在class组件中可以使用生命周期函数,知道组件触发的过程. 代码如下(示例): import React, { Component } from 'react' expo

  • React Hooks--useEffect代替常用生命周期函数方式

    目录 useEffect代替常用生命周期函数 原始生命周期函数 对React Hooks(useState和useEffect) 的总结思考 一.为什么用React Hooks(面向生命周期编程变成了面向业务逻辑编程) 二.useState理解 三.useEffect的理解(原则:让你忘记类组件的生命周期的函数写法) 四.useState和useEffect声明时有先后顺序 useEffect代替常用生命周期函数 原始生命周期函数 componentDidMount componentDidUp

  • React-hooks中的useEffect使用步骤

    目录 1.理解函数副作用 什么是副作用? 常见的副作用 2.基础使用 使用步骤 示例代码 3.依赖项控制 useEffect 永远是在 DOM渲染完成之后执行 1.理解函数副作用 什么是副作用? 对于React组件来说,主作用是根据数据(state/props)渲染UI,除此之外都是副作用(比如手动修改DOM.发送ajax请求). 常见的副作用 数据请求(发送ajax) 手动修改 DOM localstorage操作 useEffect 函数的作用就是为react函数组件提供副作用 2.基础使用

  • React中hook函数与useState及useEffect的使用

    目录 1. 简介 2. useState使用 3. useEffect使用 useEffect发起网络请求 1. 简介 在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数组件,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组件来获取数据,处理数据,并向下传递参数给 UI 组件进行渲染.React在v16.8 的版本中推出了 React Hooks 新特性,Hook是一套工具函数的集合,它增强了函数

  • React-Hook中使用useEffect清除定时器的实现方法

    目录 useEffect useEffect清除定时器 最后 useEffect 之前我们学习了class组件的声明周期,那么我们想在函数式组件中做一些声明周期有关操作能否实现呢?函数式组件中是没有生命周期的,所以就可以使用useEffect来替代.我们可以把useEffect看作组件加载.组件更新.组件卸载的三个生命周期方法的组合. 下面我们一起来通过案例学习useEffect的使用:1.这里需求是写一个点击事件让state累加,并且吧state展示在title上2.首先要导入React, {

  • React Hook中useState更新延迟问题及解决

    目录 React Hook中useState更新延迟 React Hook useState连续更新对象问题 React Hook中useState更新延迟 方法一:去掉useEffect的第二个参数 例如以下代码 错误实例 const[zoom, setZoom] = useState(0); useEffect(() = >{     document.getElementById('workspace-content').addEventListener('mousewheel', scr

  • asp.net中Timer无刷新定时器的实现方法

    本文实例讲述了asp.net中Timer无刷新定时器的实现方法.Timer控件要实现无刷新,得用到ajax技术,这里使用VS2008自带的ajax技术.    首先得添加一个ScriptManager控件,然后再添加一个UpdatePanel用于存放Timer控件内容的,就可以实现无刷新了.下面是详细的内容: 一.前台代码如下: <form id="form1" runat="server"> <asp:ScriptManager ID="

  • React Hook中的useEffecfa函数的使用小结

    目录 useEffect的详细解析 useEffecf基本使用 清除副作用(Effect) 使用多个useEffect useEffect性能优化 useEffect的详细解析 useEffecf基本使用 书接上文, 上一篇文章我们讲解了State Hook, 我们已经可以通过这个hook在函数式组件中定义state 我们知道在类组件中是可以有生命周期函数的, 那么如何在函数组件中定义类似于生命周期这些函数呢? Effect Hook 可以让你来完成一些类似于class中生命周期的功能; 事实上

  • React Hook中的useState函数的详细解析

    useState => 让函数组件具有维持状态的能力useState 这个 Hook 是用来管理 state 的,它可以让函数组件具有维持状态的能力.即在一个函数组件的多次渲染之间,这个 state 是共享的. Hooks 的最大的作用就是可以让你在不编写class的情况下使用state以及其他的 React 特性 useState的详细解析 在上一篇文章中, 我用到useState来让大家体验一下hooks函数 import { memo, useState } from "react&

  • 在NodeJs中使用node-schedule增加定时器任务的方法

    java中直接使用定时器类就行了,但是在node中就没有这么简单了,只能使用setInterval或者setTimeout两个方法来实现,但是太繁琐了,搜索了之后发现node-schedule这个包,特意试用一下 版本 node版本12.16.2koa2版> 2.7.0 1. 安装 npm insatll node-schedule -S 2. 使用方法 2-1. 调用格式 // 任务名称可以用中文,也可以用英文,但必须唯一 schedule.scheduleJob(`任务名称`, `时间`,

  • vue、react等单页面项目部署到服务器的方法及vue和react的区别

    最近好多伙伴说,我用vue做的项目本地是可以的,但部署到服务器遇到好多问题:资源找不到,直接访问index.html页面空白,刷新当前路由404...用react做的项目也同样遇到类似问题.现在我们一起讨论下单页面如何部署到服务器? 由于前端路由缘故,单页面应用应该放到nginx或者apache.tomcat等web代理服务器中,千万不要直接访问index.html,同时要根据自己服务器的项目路径更改react或vue的路由地址. 如果说项目是直接跟在域名后面的,比如:http://www.so

  • react中使用useEffect及踩坑记录

    目录 使用useEffect及踩坑记录 useEffect 介绍 useEffect常见跳坑 hooks中useEffect()使用总结 常见使用 useEffect() 的第二个参数说明 useEffect() 第一个函数参数的返回值 useEffect() 的注意点 使用useEffect及踩坑记录 useEffect 介绍 useEffect时reactHook中最重要,最常用的hook之一. useEffect相当于react中的什么生命周期呢? 这个问题在react官网中有过介绍,在使

  • React Hook 'useEffect' is called in function报错解决

    目录 总览 声明组件 声明自定义钩子 总结 总览 为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use作为函数名的前缀.比如说,useCounter使其成为一个组件或一个自定义钩子. 这里有个示例用来展示错误是如何发生的. // App.j

随机推荐