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

  • 华为mate10pro与nova3对比(华为mate10pro与nova5Pro)

    华为mate10pro与nova3对比(华为mate10pro与nova5Pro)

  • 为什么拍照竖着拍出来是横的(为什么拍照竖着拍出来是横的苹果12)

    为什么拍照竖着拍出来是横的(为什么拍照竖着拍出来是横的苹果12)

  • 小米10和10pro区别(小米10和10pro差别)

    小米10和10pro区别(小米10和10pro差别)

  • 苹果7快捷指令在哪(苹果7快捷指令里面没有nfc)

    苹果7快捷指令在哪(苹果7快捷指令里面没有nfc)

  • p40多少倍变焦(p40多少倍光学变焦)

    p40多少倍变焦(p40多少倍光学变焦)

  • qq照片删除了怎么找回(qq照片删除了怎么恢复回来)

    qq照片删除了怎么找回(qq照片删除了怎么恢复回来)

  • 哔哩哔哩转正用户什么意思(哔哩哔哩转正用户有什么用)

    哔哩哔哩转正用户什么意思(哔哩哔哩转正用户有什么用)

  • 拼多多怎么看勋章墙(拼多多如何看自己的勋章)

    拼多多怎么看勋章墙(拼多多如何看自己的勋章)

  • 怎样缓存电视剧(爱奇艺怎样缓存电视剧)

    怎样缓存电视剧(爱奇艺怎样缓存电视剧)

  • 个人热点是什么意思(个人热点是什么安全类型)

    个人热点是什么意思(个人热点是什么安全类型)

  • ipad怎么连接音响(ipad如何连接音响蓝牙)

    ipad怎么连接音响(ipad如何连接音响蓝牙)

  • 微信正在输入为什么有的人没有(微信正在输入为什么关不掉)

    微信正在输入为什么有的人没有(微信正在输入为什么关不掉)

  • word中怎样设置图片样式(word设置页面颜色)

    word中怎样设置图片样式(word设置页面颜色)

  • ios13.1商店怎么更新app(ios13 app商店怎么退出账号)

    ios13.1商店怎么更新app(ios13 app商店怎么退出账号)

  • 耳机插上电脑还是外放(耳机插上电脑还是外放win10)

    耳机插上电脑还是外放(耳机插上电脑还是外放win10)

  • 抖音开店保证金是多少(抖音开店保证金多久能退回来)

    抖音开店保证金是多少(抖音开店保证金多久能退回来)

  • vivo手机串号怎么查询(vivo手机查询串码)

    vivo手机串号怎么查询(vivo手机查询串码)

  • 苹果手机拉黑后打电话能看到吗(苹果手机拉黑后能看到对方来电吗)

    苹果手机拉黑后打电话能看到吗(苹果手机拉黑后能看到对方来电吗)

  • 苹果手机括号怎么打(苹果手机括号怎么弄)

    苹果手机括号怎么打(苹果手机括号怎么弄)

  • 微信如何加人方法(微信加人方法和技巧)

    微信如何加人方法(微信加人方法和技巧)

  • 华为鸿蒙系统怎么取消华为账号授权? 鸿蒙取消授权的应用技巧(华为鸿蒙系统怎么降级版本)

    华为鸿蒙系统怎么取消华为账号授权? 鸿蒙取消授权的应用技巧(华为鸿蒙系统怎么降级版本)

  • 冰川国家公园中的佩里托莫雷诺冰川,阿根廷 (© Juergen Schonnop/Getty Images)(冰川国家公园在哪)

    冰川国家公园中的佩里托莫雷诺冰川,阿根廷 (© Juergen Schonnop/Getty Images)(冰川国家公园在哪)

  • 帝国CMS如何判断会员是否登录及登录后才能看到内容(帝国cms如何判断图片有没有被使用)

    帝国CMS如何判断会员是否登录及登录后才能看到内容(帝国cms如何判断图片有没有被使用)

  • 印花税购买使用要求及印花税会计分录?
  • 个税计提和发放分录
  • 减免城建税税款会计分录
  • 存货核算与销售核算直接联系的是
  • 会计凭证如何填写
  • 预付房租的会计科目
  • 存在标的的资产是什么意思
  • 什么费用计入什么科目
  • 报销车费滴滴怎么打印电子发票
  • 营改增后征收增值税的税目
  • 税控技术服务
  • 车辆购置税是否计入固定资产
  • 勾选发票必须当月认证吗
  • 同程旅行酒店预订
  • 工会有纳税号吗
  • 个人住房交易50万元
  • 出口分为哪四步
  • 增值税申报尾差怎么做账
  • 个税申报状态失败
  • 一次性收取跨年租金房产税怎么交
  • 吸收合并税费
  • 进项税额进成本
  • 向人力资源公司辞职怎么说
  • 无法偿还的应付款项予以转账
  • qq游戏怎么玩不了怎么回事
  • 选择简易征收
  • 委托加工代收代缴增值税吗
  • php string函数
  • 公司吸收合并股权
  • 2017年新准则下,收入确认的金额应是
  • 出口退税退回的税款怎么记账
  • 增值税发票红字信息表
  • 摊销租赁费的会计分录
  • php实现多条件查询
  • 公允价值变动损益和投资收益区别
  • vscode调试在哪
  • opencv.
  • div css页面布局
  • yolo 模型训练
  • Yii2针对游客、用户防范规则和限制的解决方法分析
  • 如何用wordpress
  • vscode开发gui
  • mongodb aggregate 性能
  • 支付运输费计入
  • 失控票要在抵扣当月转出吗
  • 对公户单笔转账有限额吗
  • 小规模纳税人纳多少税
  • 如何设置固定资产累计折旧增值税进项税额缺损入账科目
  • mysql主从配置详解
  • 小规模企业免税收入会计分录
  • 对方公司已注销还能起诉吗
  • 周转材料低值易耗品五五摊销法
  • 企业每月利润多少合适
  • 固定资产可资本化的后续支出
  • 发票本月没有认证能用吗
  • 一般纳税人租赁不动产增值税税率
  • 怎么理解什么是生命
  • 销售方开具的红字专票购买方在税控盘要怎么操作
  • 月初计提工资,月中发放
  • 收到银联商务客户短信
  • 费用多计提了怎么办
  • 向个人借款在现场怎么写
  • centos rpm包存放位置
  • mysql 元组
  • 宏基笔记本电脑质量怎么样
  • Win10 Mobile 10572预览版新增中文简体五笔输入法
  • win7误删注册表
  • rtos用什么语言
  • 如何查看windows使用痕迹
  • centos安装软件教程
  • linux时区问题
  • xcode的bundle identifier修改
  • js中的表达式是什么
  • ajax请求传参
  • 事务所是干什么的会计
  • 增值税纳税申报操作流程
  • 湖南国税电子税务局网
  • 税款所属期起止日期
  • 免税证明如何办理
  • 工业生产和农业生产区别
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设