ReactHook—— useEffect刚开始容易理解错的地方

最新推荐文章于 2024-07-27 09:09:30 发布
最新推荐文章于 2024-07-27 09:09:30 发布
阅读量637 收藏
点赞数
文章标签： 前端 reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fang_my/article/details/123664877
版权

要弄清楚这个钩子函数，你首先需要了解react的生命周期原理。

我直接放这张图肯定会有新手直接傻眼，这什么鬼玩意啊？因为我刚学到生命周期的时候也是一脸懵逼，通过实际例子来看！

 下面是我个人博客首页左侧轮播图的效果实现，手机端效果隐藏了，手机端看不到效果。推荐电脑端看一下。：https://hanzhenfang.vercel.app/icon-default.png?t=M276https://hanzhenfang.vercel.app/

刚学到这里的时候，我第一反应是简单，我用uesState这个钩子不就行了吗？

 是，谁去调用呢？ 你这个方法写在这里，没人用啊？你说，我加个按钮不就行了吗？

是，你加个按钮可以点击一下然后开始实现换图片的效果，但是客户需求就是你进去网页图片自动就换，你怎么办呢？

首先我们要有一个概念，我们是需要用户点击博客页面，图片就随着时间开始变化的。

很遗憾，单纯的useState是完成不了任务的。 这时候我们就需要用到类似于class组件里的 componentDidMount 不得不说React在起名字的时候真的是把语义话做到了极致。Did，有点英语常识的都知道did是过去式，组件didMount，组件已经挂载好了

大白话就是 我组件已经渲染好了，你需要我干什么？巧了嘛，我需要你帮我运行我的SetInterval啊

但是突然回过神来，那是人家类组件的专属钩子函数，我们是函数组件啊。别怕，useEffect来了。

useEffect接收两个参数(一个参数是你希望在页面渲染完成以后立即执行的函数，第二个是参考对象)如果你写入空数组，那么useEffect就相当于只执行一次，因为参考对象空数组永远也不会发生变化，如果你写了count，那么你的意思就是count更新，就会调用useEffect。这时候就会陷入一个误区。为了方便看，我清除了一部分内容，后面再讲。

 ok，我们把刚刚写好的函数放进去，好了，可以正常执行了。刚开始我也是这样想的，网上的教程视频说的需要清除计时器，我就在想，我清除干嘛啊，这不是已经可以满足我的需求了吗？当我自己写博客页面的时候，我才知道这是为什么。我们要知道react是一个单页面应用，我在代码中加了一个console.log（"计时器还在运行"） 

这时候起来没什么 

可当我点进去主页的时候，你会发现浏览器报错了，它说一个我的计时器还在运行，但是这个组件已经被卸载了。这在实际工作当中会发生一些内存泄漏的危险。

 那咋办呢？我们希望在我们的计时器卸载的时候，可以清除这个计时器，方法也非常简单，那就是在计时器的内部 给他返回一个清除计时器的函数不就行了吗？

你可能会有疑问，这effect执行不就刚开始执行起来就马上卸载了吗？

react是非常贴心的帮你自动处理在effect中的第二个return语句，它会在组件第二次更新的时候自动调用，(或者组件卸载的时候才会调用，return里的函数相当于类组件里的componentWillUnMount。)它并不会在页面完成以后马上调用。

什么是组件第二次更新呢？为了演示，第二个参数修改为count，意思为 我修改了count，就会重新调用一次effect，就相当于如果第二个参数是一个变化的值，那么useEffect就相当于变成了componentDidUpdate，我更新完了，你需要我做什么？

接下来我们看控制台怎么输出。你会发现第二个“计时器被卸载”并不会执行。

 它很智能的在完成更新后自动清除了上一个计时器然后重新开启了新的计时器！！

 至此，useEffect已经完成了类生命周期的大部分功能。

 

 

 

 

韩振方
关注
用了这么长时间的 React useEffect hook，你用对了吗？
张旭乾 - 全栈工程师/海归
11-12 7074
主线什么是 Effect与生命周期的关系运行时机类实际工作的例子 - 抓取数据第二个参数添加其他属性划重点 useEffect 是 React Hooks 的核心，要保证理解它的运行机制和正确的使用方法才能避免这样那样的坑。在以前的工作中，因为它我碰到过无数个坑，比如拿到的值是旧的，该执行的时候不执行，不该执行的时候执行了…… 所以为了避免如上尴尬、节省绞尽脑汁找 bug 的时间、保护咱们的发际线...
【详解】 React 组件生命周期 API 及 useEffect Hook 新特性方案
湫一
06-11 6822
文章目录1. 引言2. 组件生命周期过程及API详解 3. 使用 useEffect 方法替代生命周期API 4. 推荐阅读 如果你想要： 完整了解整个组件生命周期和对应函数API，那么请从头开始； 快速理解传统生命周期函数API的含义和使用，那么点击这里； 快速了解如何在函数组件中使用useEffect来替代原有的生命周期API，那么点击这里. 1. 引言 如果你是一名前端开发者，并且使...
【React】useEffect 钩子详解
最新发布
lph159的博客
07-27 801
在类组件中，我们通常在生命周期方法中执行这些操作，而在函数组件中，我们使用。钩子是 React 16.8 版本引入的，它允许我们在函数组件中执行副作用操作。如果传递一个空数组作为依赖项，副作用函数只会在组件首次渲染时执行一次。会在每次组件渲染或更新时执行，而返回的清除函数会在组件卸载时执行。发生变化时，副作用函数会执行，同时会先执行上一次渲染中的清除函数。如果传递一个依赖项数组，副作用函数会在依赖项发生变化时执行。如果不传递依赖项数组，副作用函数会在每次渲染后执行。在一个组件中可以使用多个。
关于useState、useEffect的一些误区和心得
Ranye的博客
09-20 449
可以认为每次 Render 的内容都会形成一个快照并保留下来，因此当状态变更而 Rerender 时，就形成了 N 个 Render 状态，而每个 Render 状态都拥有自己固定不变的 Props 与 State。其中的 count 并非变量、更不是事件监听器之类的东西。每次 setState 的时候，react 直接重新渲染 DOM 树，渲染的时候给 count 赋一个常量的值。同样的，props 也是在 render 的时候生成一个新的 const。
ReactHook之useEffect
richest_qi的博客
06-02 244
计数器案例涉及的代码文件，包括： 入口文件index.js 入口组件App.js Counter/index.jsx（Counter组件） 函数式组件实现Counter React Hook使得函数式组件可以使用state及其他React特性。React Hook常见有：本例演示Effect Hook，即useEffect的使用。代码更改涉及的文件有：component/Counter/index.jsx。 使用 ，可以在函数式组件中如下副作用操作： 的作用相当于以下3个生命周期函数的组合：，可以接收
你不知道的React-Hook（useEffect）
Liingot的博客
05-21 354
hello，大家好。今天我们来学习useEffect，没有学习useState的同学可以看上篇文章你不知道的React-Hook（useState） 如果大家了解React生命周期的话React生命周期，可以把componentDidMount（挂载后），componentDidUpdate（更新后），componentWillUnmount（组件销毁前）的结合体。 为什么要使用useEffect？ 在组件内使用 useEffect 是的可以直接从副作用中访问计数器的 count 或者任何的 prop
useEffect
weixin_44800076的博客
10-05 522
useEffect的正确使用姿势
用动画和实战打开 React Hooks（一）：useState 和 useEffect
图雀社区
04-25 1678
我们研发开源了一款基于 Git 进行技术实战教程写作的工具，我们图雀社区的所有教程都是用这款工具写作而成，欢迎 Star 哦 如果你想快速了解如何使用，欢迎阅读我们的 教程文档 哦 本文由图雀社区成员 mRc 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。 如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程???? 自从...
浅谈useEffect
Hay-Zero的博客
12-31 2129
作用 useEffect接收一个函数，可以让用户在函数组件中执行副作用操作，如： 设置订阅和事件处理 ajax请求等异步操作 更改DOM对象及其他会对外部产生影响的操作等 使用方式 useEffect(create[, deps]); 第一个参数是要执行的 effect，而第二个参数是依赖项，依赖项是选填的。 例如 function App() { useEffect(() => { document.title = 'example'; // 副作用操作 }); retur
用动画和实战打开 React Hooks（二）：自定义 Hook 和 useCallback
图雀社区
04-27 1483
本文由图雀社区成员 mRc 写作而成，欢迎加入图雀社区，一起创作精彩的免费技术教程，予力编程行业发展。 如果您觉得我们写得还不错，记得 点赞 + 关注 + 评论 三连，鼓励我们写出更好的教程???? 在第二篇教程中，我们将手把手带你用自定义 Hook 重构之前的组件代码，让它变得更清晰、并且可以实现逻辑复用。在重构完成之后，我们陷入了组件“不断获取数据并重新渲染”的无限循环，这时候，useC...
VUE React Angular
DRX0815的博客
01-24 2578
Typescript, ES6 & ES5 React 专注于使用 Javascript ES6 Vue 使用 Javascript ES5 或 ES6 Angular 依赖于 TypeScript 模板 —— JSX 还是 HTML React — JSX：可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言 Vue 具有“单个文件组件” Angular 模板使
useEffect的使用
it佳佳的博客
05-25 366
Form窗体 const { onSubmit: handleUpdate, onCancel: handleUpdateModalVisible, createModalVisible, values, dispatch } = props; const [menuData, setMenuData] = useState([]); useEffect(() => { dispatch({ #注意这里必须有相应的model
useEffect使用方法
我的博客
10-17 1862
useEffect使用方法 useEffect 替代了原来的类组件生命周期，有三种使用方式，我们可以针对不同的业务使用useEffect； import React, {useEffect, useState} from "react"; import reactDom from "react-dom"; function Effect (){ const [count, setCount] = useState(0) // 1. 第一种使用方法：componentDidMount, c
useEffect使用指南
热门推荐
大灰狼的小绵羊哥哥的博客
07-02 6万+
最近在写一些React的应用，用上了最新的Hooks。Hooks好用，但是对于刚上手Hooks的小伙伴来说，坑也挺多的。所以决定总结一下Hooks的使用经验，从useEffect开始。useEffect用于处理组件中的effect，通常用于请求数据，事件处理，订阅等相关操作。这里以数据请求为例，来深入介绍useEffect的用法。 最基本的使用 首先，举一个简单的例子： import Re...
useEffect详解
IT_bar的博客
05-17 5万+
useEffect使用时有以下4种情况 1、不传递 useEffect不传递第二个参数会导致每次渲染都会运行useEffect。然后，当它运行时，它获取数据并更新状态。然后，一旦状态更新，组件将重新呈现，这将再次触发useEffect，这就是问题所在。 //1 useEffect(()=>{ console.log(props.number) setNumber(props.number) }) //所有更新都执行 2、传递空数组 //2 useEffect(()=>{ console.log(
React中的useEffect(副作用)
weixin_47075145的博客
11-16 4185
useEffect是用来使函数组件也可以进行副作用操作的。那么什么是副作用呢？函数的副作用就是函数除了返回值外对外界环境造成的其它影响。举个例子，假如我们每次执行一个函数，该函数都会操作全局的一个变量，那么对全局变量的操作就是这个函数的副作用。而在React的世界里，我们的副作用大体可以分为两类，一类是调用浏览器的API，例如使用addEventListener来添加事件监听函数等，另外一类是发起获取服务器数据的请求，例如当用户组件挂载的时候去异步获取用户的信息等。
useEffect的基本使用
guoth的博客
03-17 914
函数式组件useEffect为模拟class组件的生命周期钩子副操作； 侧重effect和return销毁函数的执行时机
reacthook useEffect 页面渲染完后 执行useEffect 方法
04-10
React Hook中的useEffect是一个用于处理副作用的Hook函数。它在组件渲染完成后执行，并且可以在组件的生命周期中多次调用。 useEffect接受两个参数：一个是回调函数，另一个是依赖数组。回调函数会在组件渲染完成后...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值