位置: IT常识 - 正文

【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext(react hook详解)

编辑:rootadmin
【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext

推荐整理分享【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext(react hook详解),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react hook教程,react hook详解,react hook ref,react hooks 教程,react hooks in action,react hook hoc,react hook ref,react hook hoc,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻React专栏 上篇文章初步学习了Hooks的基础知识 今天来深入学习Hooks的一些扩展知识 感兴趣的小伙伴一起来看看吧~🤞

文章目录useState -回调函数的参数使用场景语法语法规则语法选择代码useEffect - 发送网络请求使用场景语法要求正确写法useRef使用场景使用步骤获取dom获取组件实例useContext实现步骤代码实现useState -回调函数的参数使用场景

参数只会在组件的初始渲染中起作用,后续渲染时会被忽略。如果初始 state 需要通过计算才能获得,则可以传入一个函数,在函数中计算并返回初始的 state,此函数只在初始渲染时被调用。

语法const [name, setName] = useState(()=>{ // 编写计算逻辑 return '计算之后的初始值'})语法规则回调函数return出去的值将作为 name 的初始值回调函数中的逻辑只会在组件初始化的时候执行一次语法选择如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可如果要初始化的数据无法直接得到需要通过计算才能获取到,使用useState(()=>{})代码import { useState } from 'react'function Counter(props) { const [count, setCount] = useState(() => { return props.count }) return ( <div> <button onClick={() => setCount(count + 1)}>{count}</button> </div> )}function App() { return ( <> <Counter count={10} /> <Counter count={20} /> </> )}export default AppuseEffect - 发送网络请求使用场景

如何在useEffect中发送网络请求,并且封装同步 async await操作

语法要求

不可以直接在useEffect的回调函数外层直接包裹 await ,因为异步会导致清理函数无法立即返回

useEffect(async ()=>{ const res = await axios.get('http://geek.itheima.net/v1_0/channels') console.log(res)},[])正确写法

在内部单独定义一个函数,然后把这个函数包装成同步

useEffect(() => { // 发送请求 async function loadData() { const res = await fetch('http://geek.itheima.net/v1_0/channels') console.log(res) } loadData()}, [])useRef使用场景【React-Hooks进阶】useState回调函数的参数 / useEffect发送网络请求/ useRef / useContext(react hook详解)

在函数组件中获取真实的dom元素对象或者是组件对象

使用步骤导入 useRef 函数执行 useRef 函数并传入null,返回值为一个对象 内部有一个current属性存放拿到的dom对象(组件实例)通过ref 绑定 要获取的元素或者组件获取domimport { useEffect, useRef } from 'react'function App() { const h1Ref = useRef(null) useEffect(() => { console.log(h1Ref.current) },[]) return ( <div> <h1 ref={ h1Ref }>this is h1</h1> </div> )}export default App获取组件实例

函数组件由于没有实例,不能使用ref获取,如果想获取组件实例,必须是类组件

import React, { useRef } from 'react'class TeastC extends React.Component { render() { return ( <div>我是类组件</div> ) }}function App() { const testRef = useRef(null) useEffect(() => { console.log(testRef.current) }) // useEffect回调 是在dom渲染之后还是之前执行? 之后! return ( <div> <TeastC ref={testRef} /> </div> )}useContext

一种组件间通信方式, 常用于【祖组件】与【后代组件】间通信

在hooks下如何跨组件传数据

实现步骤使用createContext 创建Context对象在顶层组件通过Provider 提供数据在底层组件通过useContext函数获取数据代码实现import { createContext, useContext, useState } from 'react';// 创建Context对象const Context = createContext()function ConA() { // 底层组件通过useContext函数获取数据 const count = useContext(Context) return ( <div> this is ConA app传过来的数据是:{count} <ConC /> </div> )}function ConC() { // 底层组件通过useContext函数获取数据 const count = useContext(Context) return ( <div> this is ConC app传过来的数据是:{count} </div> )}function Demo() { const [count, setCount] = useState(10) return ( // 顶层组件通过Provider 提供数据 <Context.Provider value={count}> <div> <ConA /> <button onClick={() => { setCount(count + 1) }}>+</button>//提供方修改count数据之后,使用方也会更新这个数据 </div> </Context.Provider> )}//打印结果: this is ConA app传过来的数据是:10this is ConC app传过来的数据是:10

Context如果要传递的数据,只需要在整个应用初始化的时候传递一次就可以,就可以选择在入口文件index.js里通过Provider 提供数据。

Context如果需要传递数据并且将来还需要再对数据做修改,底层组件也需要跟着一起变,就可以在顶层组件那里通过Provider 提供数据。

今天的分享就到这里啦✨\textcolor{red}{今天的分享就到这里啦✨}今天的分享就到这里啦✨

原创不易,还希望各位大佬支持一下\textcolor{blue}{原创不易,还希望各位大佬支持一下}原创不易,还希望各位大佬支持一下

🤞 点赞,你的认可是我创作的动力!\textcolor{green}{点赞,你的认可是我创作的动力!}点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向!\textcolor{green}{收藏,你的青睐是我努力的方向!}收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富!\textcolor{green}{评论,你的意见是我进步的财富!}评论,你的意见是我进步的财富!

本文链接地址:https://www.jiuchutong.com/zhishi/292311.html 转载请保留说明!

上一篇:La Selva生物站热带雨林树冠上的黑嘴巨嘴鸟,哥斯达黎加 (© Greg Basco/Minden Pictures)

下一篇:GNSS算法相关开源代码(含多传感器融合相关项目)(简述gnss数据处理流程)

  • 优酷的自动续费怎么取消(怎么取消掉优酷的自动续费)

    优酷的自动续费怎么取消(怎么取消掉优酷的自动续费)

  • 微信运动怎么关闭(微信运动怎么关闭让别人看不到)

    微信运动怎么关闭(微信运动怎么关闭让别人看不到)

  • bilibili下载的视频保存在手机的哪里(bilibili下载的视频在哪个文件)

    bilibili下载的视频保存在手机的哪里(bilibili下载的视频在哪个文件)

  • 抖音挂淘宝店铺的要求(抖音挂淘宝店铺要求)

    抖音挂淘宝店铺的要求(抖音挂淘宝店铺要求)

  • 微信文件传输助手怎么删除(微信文件传输助手是真人吗)

    微信文件传输助手怎么删除(微信文件传输助手是真人吗)

  • 腾讯会议怎么关麦(腾讯会议怎么关闭摄像头)

    腾讯会议怎么关麦(腾讯会议怎么关闭摄像头)

  • 微信黄码是什么意思啊(微信黄码是什么样的图片)

    微信黄码是什么意思啊(微信黄码是什么样的图片)

  • 十六进制数cd等值的十进制数是(十六进制cd的十进制)

    十六进制数cd等值的十进制数是(十六进制cd的十进制)

  • i59600kf配什么显卡(i59600k搭配什么主板)

    i59600kf配什么显卡(i59600k搭配什么主板)

  • 手机qq能发文件夹吗(手机qq文件能发到微信吗)

    手机qq能发文件夹吗(手机qq文件能发到微信吗)

  • 标签已失效怎么处理(标签已失效怎么办)

    标签已失效怎么处理(标签已失效怎么办)

  • 魅族实名认证怎么解除(魅族手机实名认证有什么用)

    魅族实名认证怎么解除(魅族手机实名认证有什么用)

  • 探探能否隐藏登录时间(探探可以隐藏登录时间吗)

    探探能否隐藏登录时间(探探可以隐藏登录时间吗)

  • 联想电脑pin码忘了怎么办(联想电脑pin码忘记开不了机怎么办)

    联想电脑pin码忘了怎么办(联想电脑pin码忘记开不了机怎么办)

  • 抹掉iphone需要多久(抹掉iphone要多长时间)

    抹掉iphone需要多久(抹掉iphone要多长时间)

  • 一次性地铁卡丢了怎么办(一次性地铁卡丢在地铁站)

    一次性地铁卡丢了怎么办(一次性地铁卡丢在地铁站)

  • 爱奇艺会员可以登录几个设备(爱奇艺会员可以分享吗)

    爱奇艺会员可以登录几个设备(爱奇艺会员可以分享吗)

  • 中国大陆手机号是什么意思(中国大陆手机号码格式+86-)

    中国大陆手机号是什么意思(中国大陆手机号码格式+86-)

  • 苹果13.1.2怎么更新下载的软件(苹果怎么更新13.3)

    苹果13.1.2怎么更新下载的软件(苹果怎么更新13.3)

  • vue时长能超过180秒吗(vue超时时间)

    vue时长能超过180秒吗(vue超时时间)

  • word图标变成白底怎么办(word图标变成白色)

    word图标变成白底怎么办(word图标变成白色)

  • PS怎么制作细格子唯美水印(ps如何画细线)

    PS怎么制作细格子唯美水印(ps如何画细线)

  • excel如何批量合并单元格(Excel如何批量合并各科成绩)

    excel如何批量合并单元格(Excel如何批量合并各科成绩)

  • linux sed 多行处理详细总结(linux sed 行尾)

    linux sed 多行处理详细总结(linux sed 行尾)

  • Jmeter连接不同类型数据库语法(jmeter接口串联)

    Jmeter连接不同类型数据库语法(jmeter接口串联)

  • 申报个人所得税在哪里报
  • 进项税额计入其他应付款是什么意思
  • 委托开发费用免所得税和增值税
  • 企业注销清算方案
  • 转租不动产需要预缴增值税吗
  • 转增股 分红
  • 销售机械设备的税率是多少
  • 个体户办营业执照需要什么证件和材料
  • 公司注销时资本要交税吗
  • 企业盈利计提所得税么?
  • 委托加工应税消费品收回后直接销售
  • 以资抵债方式取得的无形资产如何记账?
  • 向股东分配股利会影响所有者权益吗
  • 土地使用税和房产税
  • 什么情况下确认成本
  • 应收账款平均余额怎么理解
  • 汽车销售公司购买车辆会计科目
  • bp程序是什么
  • deepin 终端命令
  • 艾叶泡脚的方法和注意事项
  • 收购后的固定资产如何入账
  • 预提费用的对应科目
  • 销售多余材料的收入会计分录
  • 借款是经营性负债吗
  • php对接mysql
  • php实现验证码
  • 利得是什么举个例子
  • element ui
  • 有趣的html简单代码
  • 前端按钮跳转界面
  • 准确率精确率
  • php创建多级目录的方法
  • 基于php判断客户是否存在
  • 应付票据核算的内容
  • 税控盘全额抵扣发票怎么勾选
  • 应付职工薪酬包括哪些二级科目
  • 没开票的工程可以结转成本吗
  • 研发费用属于什么会计科目
  • 固定资产进项税额怎么抵扣
  • 企业年报股东出资信息
  • 成品油红字发票开具后库存数量如何冲回?
  • 现代服务业进项抵扣新政策
  • sqlserver2008默认实例
  • 个人缴纳职业年金的比例为本人缴费工资的多少
  • 应收账款贷方余额年末怎么处理
  • 固定资产损失税前扣除备查资料有哪些
  • 出纳去银行取钱需要带什么
  • 应交税费月底账务处理
  • 外地预缴税款流程
  • 没有收到款项签认债有用吗
  • 企业征地款会计分录
  • 租赁收入属于什么行业
  • 旅客运送的一般规定
  • 民办学校学费收入
  • 发放工资并扣个人所得税
  • 企业财务建账应由谁负责
  • sql server设置
  • mysql删除的数据恢复
  • ie11 ua
  • win8系统怎么清理缓存
  • ubuntu左侧菜单不见了
  • win8系统怎么设置
  • windows xp windows
  • win8如何进行系统还原
  • win7怎么设置网速限制
  • win10浏览器没有网络连接
  • linux软件少
  • win7纯净版和正版区别
  • Android In <declare-styleable> MenuView, unable to find attribute android:preserveIconSpacing
  • js中date
  • android 刷新view
  • 使用ngView配合AngularJS应用实现动画效果的方法
  • js显示word
  • js math.js
  • Android as Bluetooth Low Energy Peripherial (GATT server).
  • python如何运用
  • 佛山顺德怎么坐地铁到广州
  • 上海地铁和公交乘车码
  • 税务公文字体
  • 土地增值税分期清算条件?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设