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

  • oppo怎么导入自己动态锁屏(oppo怎么导入自己动态壁纸视频教程)

    oppo怎么导入自己动态锁屏(oppo怎么导入自己动态壁纸视频教程)

  • oppor9m怎么分屏(oppor9m手机如何分屏)

    oppor9m怎么分屏(oppor9m手机如何分屏)

  • 快手有消息为什么没有红点提示呢(快手有消息为什么不提醒)

    快手有消息为什么没有红点提示呢(快手有消息为什么不提醒)

  • 华为nova5pro智能语音助手在哪个功能里(华为nova5pro智能语音小艺能改吗)

    华为nova5pro智能语音助手在哪个功能里(华为nova5pro智能语音小艺能改吗)

  • iphonexr屏幕镜像点不开(iphonexr屏幕镜像用不了)

    iphonexr屏幕镜像点不开(iphonexr屏幕镜像用不了)

  • cad曲线快捷键(cad 曲线快捷键)

    cad曲线快捷键(cad 曲线快捷键)

  • 设置朋友权限仅聊天什么意思(设置朋友权限仅聊天可以视频吗)

    设置朋友权限仅聊天什么意思(设置朋友权限仅聊天可以视频吗)

  • 液晶显示器出现水纹光环(液晶显示器出现竖线怎么修复)

    液晶显示器出现水纹光环(液晶显示器出现竖线怎么修复)

  • 2080s和2080ti差多少(2080s和2080ti性能差距有多大)

    2080s和2080ti差多少(2080s和2080ti性能差距有多大)

  • i3 9100f配什么主板(i3 9100f配什么显卡最合适)

    i3 9100f配什么主板(i3 9100f配什么显卡最合适)

  • 不是群主怎么删除成员(不是群主怎么删除群相册)

    不是群主怎么删除成员(不是群主怎么删除群相册)

  • 苹果11怎么批量删除联系人(苹果11怎么批量删除)

    苹果11怎么批量删除联系人(苹果11怎么批量删除)

  • qq音乐举报人别人会知道吗(qq音乐举报成功后果)

    qq音乐举报人别人会知道吗(qq音乐举报成功后果)

  • 手机充电器功率多少w(手机充电器功率过大对手机有影响吗)

    手机充电器功率多少w(手机充电器功率过大对手机有影响吗)

  • 苹果7自动重启怎么回事(苹果7自动重启开不了机)

    苹果7自动重启怎么回事(苹果7自动重启开不了机)

  • 新装路由器已连接不可上网怎么回事(新装路由器已连接不上网)

    新装路由器已连接不可上网怎么回事(新装路由器已连接不上网)

  • vivo微信视频怎么开美颜(vivo微信视频怎么设置)

    vivo微信视频怎么开美颜(vivo微信视频怎么设置)

  • 苹果手机怎么下载2个微信(苹果手机怎么下安卓软件)

    苹果手机怎么下载2个微信(苹果手机怎么下安卓软件)

  • 不小心买了app怎么退款(不小心买了app怎么退)

    不小心买了app怎么退款(不小心买了app怎么退)

  • 手机qq怎么隐藏星座(手机qq怎么隐藏腾讯会员图标)

    手机qq怎么隐藏星座(手机qq怎么隐藏腾讯会员图标)

  • 小米9pro怎么一键剪辑短视频(小米9pro操作技巧)

    小米9pro怎么一键剪辑短视频(小米9pro操作技巧)

  • 怎么把旧苹果手机的东西导入新苹果手机(怎么把旧苹果手机通讯录转到新苹果)

    怎么把旧苹果手机的东西导入新苹果手机(怎么把旧苹果手机通讯录转到新苹果)

  • 苹果通讯录没备份怎么恢复(苹果通讯录没备注)

    苹果通讯录没备份怎么恢复(苹果通讯录没备注)

  • 手机版微博id在哪儿(手机版微博id在哪里找)

    手机版微博id在哪儿(手机版微博id在哪里找)

  • 织梦dedecms如何批量导入关键词做内链优化(dede织梦怎么转成zblog)

    织梦dedecms如何批量导入关键词做内链优化(dede织梦怎么转成zblog)

  • 一般纳税人的做账流程
  • 什么是富人税收政策
  • 税率的具体形式
  • 合同资产指的什么
  • 申报所得税季初资产总额怎么填?
  • 教育行业主营业务内容
  • 管道安装固定方式
  • 款项已付发票未到,怎么做凭证
  • 核定征收的固定资产包括
  • 所得税二季度可以先少缴吗
  • 个税生产经营申报流程
  • 期末留抵税额可以留多久
  • 发票开错了收入增多了当月分录如何红冲?
  • 预付卡销售和充值属于什么费用
  • 非公益性捐赠支出是永久性差异吗
  • 合作开发项目收益怎么算
  • 显示器件属于什么设备
  • 城市创建税务人在行动
  • 国税零申报怎么报
  • 个人出租场地个人所得税
  • 企业所得税是什么意思需要交不需要
  • 出口退税需要什么单据
  • .exe文件病毒
  • 财务费用冲销怎样做分录
  • vue前端代码实例
  • 长期借款科目的期末余额
  • 最贵的安卓应用软件
  • javascript语言基础
  • 损益类账户的期末余额一般在借方还是贷方
  • jsonobject忽略字段
  • php ob缓存
  • php模板引擎语法
  • 移动端适配 px
  • 出口退税率和进项税额
  • 发票失控进项转出
  • 电子税务局税种核定在哪里
  • dedecms采集怎么用
  • .dot python
  • 购买种子能抵扣进项吗
  • 预缴税款可以抵扣简易计税
  • 企业会计准则无形资产土地摊销
  • 净资产包含哪些方面
  • mysql 分片优缺点
  • sql server 2005 数据库还原
  • 企业其他业务收入要交税吗
  • 发票收款人和复核人可以是一个人吗
  • 实际出资和名义出资
  • 留底税额怎么形成的
  • 合同法有什么规定
  • 办公室清洁费计入办公费吗
  • 企业期货投资收益要交所得税吗
  • 收到联营单位投入的款项98600元存入银行
  • 收到去年所得税退税款会计分录
  • 电子承兑汇票的风险有哪些
  • 金税盘清卡怎么弄
  • 购买银行结构性存款安全吗
  • 公司想自己开发票怎么申请
  • 营业外收入主要来源
  • 营改增题目
  • 高新企业研发费用占比
  • 世界杯猜测
  • 禁用windows杀毒
  • mac安装路径选择
  • 三星笔记本预装win8改win7好吗
  • linux ...
  • centos7 ip forward
  • win10dll丢失
  • 千元以内电脑
  • linux error 27:unrecognized command
  • 背包设备
  • android的intent介绍
  • jquery的实现原理
  • 税务财务负责人承担什么责任
  • 开票系统忘记密码怎么找回
  • 出租车票据国税怎么开
  • 水利基金按什么计提
  • 电子就业协议签了还是应届生
  • 企业所得税按开票金额的多少计算税率
  • 天津摇号申请查询
  • 2021年河南医保
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设