react-Effect Hook

最新推荐文章于 2023-03-06 11:16:46 发布
最新推荐文章于 2023-03-06 11:16:46 发布
阅读量274 收藏
点赞数
分类专栏： react 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuey0809/article/details/126222510
版权
本文详细介绍了React Hooks中的useEffect，它在组件渲染后的异步执行特性，与类组件生命周期方法的对比，以及如何控制副作用。重点讨论了依赖数组的使用，清理函数的执行时机，以及副作用函数中变量的闭包问题。通过实例解析，帮助读者深入理解useEffect的正确使用方式。
摘要由CSDN通过智能技术生成

Effect Hook

细节

  1. 副作用函数的运行时间点，是在页面完成真实的UI渲染之后。因此它的执行是异步的，并且不会阻塞浏览器
    1. 与类组件中componentDidMount和componentDidUpdate的区别
    2. componentDidMount和componentDidUpdate，更改了真实DOM，但是用户还没有看到UI更新，同步的。
    3. useEffect中的副作用函数，更改了真实DOM，并且用户已经看到了UI更新，异步的。
  2. 每个函数组件中，可以多次使用useEffect，但不要放入判断或循环等代码块中。
  3. useEffect中的副作用函数，可以有返回值，返回值必须是一个函数，该函数叫做清理函数
    1. 该函数运行时间点，在每次运行副作用函数之前
    2. 首次渲染组件不会运行
    3. 组件被销毁时一定会运行
  4. useEffect函数，可以传递第二个参数
    1. 第二个参数是一个数组
    2. 数组中记录该副作用的依赖数据
    3. 当组件重新渲染后，只有依赖数据与上一次不一样的时，才会执行副作用
    4. 所以，当传递了依赖数据之后，如果数据没有发生变化
      1. 副作用函数仅在第一次渲染后运行
      2. 清理函数仅在卸载组件后运行
  5. 副作用函数中，如果使用了函数上下文中的变量，则由于闭包的影响，会导致副作用函数中变量不会实时变化。
  6. 副作用函数在每次注册时，会覆盖掉之前的副作用函数，因此，尽量保持副作用函数稳定，否则控制起来会比较复杂。
合法的咸鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【React工作记录七十九】React+hook+ts+ant design封装一个具有动态表格得页面
geyaoisnice的博客
10-11 221
前端
React-Hooks 和 React-Redux
最新发布
luoxiaonuan_hi的博客
09-09 1107
React-Hooks 的 使用 React-redux 的 使用
React 使用 Effect Hook
忘川
03-19 659
Hooks是一项新功能提案，可让您在不编写类的情况下使用 state(状态) 和其他 React 功能。它们目前处于 React v16.7.0-alpha 中，并在一个开放RFC中进行讨论。 愚人码头注： 首先了解什么是副作用(Side Effect)：副作用(Side Effect)是指函数或者表达式的行为依赖于外部世界。具体可参照Wiki上的定义，副作用是指： 函数或者表达式修改了它的 scope 之外的状态 函数或者表达式除了返回语句外还与外部世界或者它所调用的函数有明显的...
react学习—Effect Hook
xun__xing的博客
05-16 492
Effect Hook一、Effect Hook2、细节 一、Effect Hook Effect Hook：用于在函数组件中处理副作用 副作用： ajax请求 计时器 其他异步操作 更改真实DOM对象 本地存储 其他会对外部产生影响的操作 import React,{useState,useEffect} from 'react' export default function App() { const [n,setN] = useState(0); //改变网页标题就属于副作用，所以在E
React Effect Hook
小怪獸丶的糖的专栏
02-15 317
Effect Hook 可以让你在函数组件中执行副作用操作(用于模拟类组件中的生命周期钩子)，可以把useEffect Hook看做 componentDidMount（） 、componentDidUpdate()、componentWillUnmount()三个函数的组合 官方文档说明：使用Effect Hook 语法说明 React.useEffect(()=>{ //这里可以执行任何带副作用操作 return ()=>{//在组件卸载前执行 //在
react:Effect Hook
weixin_62364503的博客
03-06 189
react, Effect Hook
ReactHook EffectHook
weixin_43294560的博客
06-23 213
副作用操作,使得函数组件能够进行生命周期的操作 可以看作是以下生命周期函数的结合: componentDidMount，componentDidUpdate 和 componentWillUnmount 会在每次组件挂载时、数据改变后、组件卸载前执行 1、引入 import React, { Component,useEffect } from 'react'; 2、使用 useEffect(()=>{ 操作; }) 3、若要清除副作用(如定时器,取消订阅等) useEff
React Hook和React-router的基本使用
x94410891的博客
07-29 968
目录Hook好处:Hook可以解决的问题:目前官网提供的Hook APIuseStateuseEffectuseRef自定义hook1. 创建自定义hook2.使用自定义hookreact-router基本使用1.安装2.导入3.使用总结: Hook Hook 是 React 16.8 的新增特性,React 里面的 Hook 是一个函数. 好处: 它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook可以解决的问题: 避免地狱式嵌套，可读性提高。 函数式组件，
04-React-Hook-定时器
zhangjun133133的博客
11-23 1540
前段时间学习了 React 新发布的 Hook 新功能，学完立马就爱上了这个新 API，用起来感觉比 class 组件爽多了。但 hook 虽然看似简单，但是要能熟练运用还是得花上一段时间。
彻底搞懂React-hook链表构建原理
grooyo的博客
10-18 626
每一个 hook 函数都有对应的 hook 对象保存状态信息useContext是唯一一个不需要添加到 hook 链表的 hook 函数只有 useEffect、useLayoutEffect 以及 useImperativeHandle 这三个 hook 具有副作用，在 render 阶段需要给函数组件 fiber 添加对应的副作用标记。同时这三个 hook 都有对应的 effect 对象保存其状态信息。
react多个网络请求_如何优雅的在react-hook中进行网络请求
weixin_39805087的博客
12-19 426
本文将介绍如何在使用React Hook进行网络请求及注意事项。前言Hook是在React 16.8.0版本中新加入的特性，同时在React-Native的0.59.0版本及以上进行了支持，使用hook可以不用class的方式的方式使用state，及类似的生命周期特性。本片文章通过简单的网络请求数据的demo，来一起进一步认识react-hook这一特性，增加理解，涉及到的hook有useStat...
React Hook之Effect Hook
热门推荐
吴小迪的博客
06-11 4万+
Effect Hook概念性内容介绍： Effect Hook可以让你在函数组件中执行副作用操作。 PS：副作用操作包括： 数据获取 设置定义 手动更改React组件中的DOM 。。。 Effect Hook可以把它当作是componentDidMount,componentDidUpdate和componentWillUnmount这三个生命周期的组合。（组件渲染，更新，销毁） 在组件内...
React之Hook(四)——使用 Effect Hook
hhhcbw的博客，欢迎各位来访
03-15 1262
Effect Hook 可以让你在函数组件中执行副作用操作 import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document ti
react 进阶hook 之 Effect Hook
twinkle的博客
04-05 424
Effect Hook Effect Hook：用于在函数组件中处理副作用,类似我们类组件中的生命周期函数的，ComponentDidMount（组件刚刚挂载需要进行数据请求等副作用）,ComponentDIdUpdate（组件数据已经更新并且页面已经完成挂载的对dom操作的副作用），ComponentwillUnMount(组件即将卸载销毁清楚定时器等副作用)，类组件生命周期详情 语法 // 第一个请求参数是一个回调函数，用于操作副作用的， // 第二个参数是一个数组，用于标记回调函数里面的依赖关系，
【React Hook】一文让你彻底明白何为Effect Hook？
Milk~每天分享一点点，技术进步一点点
08-11 894
使用 Effect Hook Effect Hook 可以让你在函数组件中执行副作用操作 示例： import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => {
react 强制重新渲染组件的 hook
小鑫の随笔
10-29 6317
/** * 强制刷新 */ export const useUpdate = () => { const [_, setState] = useState(0); return useCallback(() => { setState((num: number): number => num + 1); }, []); }; 点我查看代码运行效果 阅读原文
React 中的重新渲染
qq_32198115的博客
11-21 4384
React 组件在组件的状态 state 或者组件的属性 props 改变的时候，会重新渲染，条件简单，但是实际上稍不注意，会引起灾难性的重新渲染......
useEffect 依赖项为对象或数组时，引发不断重渲染问题的原因及解法
qq_33715850的博客
01-31 1878
useEffect 依赖项为对象或数组时，引发不断重渲染问题的原因及解法。
React-Hook（2）：副作用钩子useEffect
愤怒的小火柴人
03-06 1073
简单接受useEffect钩子的两个参数及其使用实例
react seteffect
05-11
React 中的 useEffect 是一个 Hook，它允许您在组件渲染后执行副作用操作。副作用操作可能包括访问外部数据源、在组件中执行 DOM 操作等。useEffect 接收两个参数：一个函数和一个依赖数组。函数定义了副作用操作，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

合法的咸鱼

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值