位置: 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数据处理流程)

  • 一个工程中可以有多个主函数
  • 股权转让如何交税
  • 当月红冲发票账务怎么处理
  • 汇算清缴利润调整会计分录
  • 个体工商户个税怎么申报
  • 私对公转账收税吗
  • 资产负债表其他流动资产包括什么
  • 汽车保险专用发票可以抵扣吗
  • 产品报废怎么做账
  • 基金收入交增值税吗
  • 房地产开发公司取名
  • 社保年年递增
  • 提供应税服务营改增的应税服务不包括什么
  • 企业给员工购买的团体意外险的被保险人一般是
  • 怎么确认收到的钱是哪个项目的
  • 股权转让 分期付款
  • 差旅费补贴需要缴纳个人所得税吗需要发票
  • 个人之间的房屋抵押需要去房管局做登记吗
  • 清算时公司亏损预交所得税能退吗
  • 小规模纳税人领发票要带什么
  • 不是经营范围内的食品
  • 办公软件无形资产的确认条件有哪些
  • 待清算专户
  • 销售回款率的具体指标
  • 支付设备维修费用计入什么科目
  • 实物资产股权投资包括
  • php数组函数大全
  • 有形动产融资租赁增值税即征即退政策
  • 个别报表内部交易
  • 应付债券到期偿还
  • 埃热泽尔斯湖面上的波纹,拉脱维亚拉特加尔地区 (© Eaglewood Films/Nimia)
  • 商业银行贷款的三种基本形式
  • 登记会计账簿的作用
  • 使用一个for循环每次输入一个姓名和得分
  • PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
  • vue高级函数
  • vue中解决跨域问题
  • 怎么查询开具的红字发票
  • 餐饮小微企业优惠政策2021
  • 其他资本公积如何转出
  • 帝国cms教程官方完整版
  • 税务新增办税人员
  • 企业的资产评估报告在哪里获取
  • 入伙退伙协议要盖章吗
  • 企业所得税该什么科目
  • 企业摊销无形资产价值时的会计处理
  • mysql客户端程序的功能是什么
  • 企业收到赠送商品会计分录
  • 按揭贷款买房是否划算
  • 甲方向乙方支付
  • 长期待摊费用摊销会计分录
  • 公司员工报销没有发票挂内账有风险吗
  • 长期应付款科目的涉税风险
  • 只有发票没有银行回单怎么做账
  • 社会团体费怎么做分录
  • 应收利息的会计分录怎么写
  • 卖二手车买卖
  • 公司购买银行理财产品怎么做账
  • 委托加工产品送货合同
  • 人力资源公司可以开培训费发票吗
  • 购买金税盘取得的发票
  • 社保的会计核算方法
  • sql server 2000安装好打开不显示名称和服务原因
  • mysql存储数据的原理
  • sql比较两个集合
  • xp系统重装u盘
  • linux中的vim命令的功能
  • 常用的网络操作命令
  • linux 更新yum
  • rteng7.exe - rteng7是什么进程 有什么用
  • win7能装coreldraw2020吗
  • 基于jQuery中ajax的相关方法汇总(必看篇)
  • ExtJS4利根据登录后不同的角色分配不同的树形菜单
  • dos命令检测硬盘坏道
  • shell发送邮件
  • easyui formatter
  • js判断ua
  • 安阳市灵活就业人员社保补贴
  • 股权收购的好处
  • 请问农村自建房彩钢瓦下面修房吊什么顶好
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设