位置: 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 Warning:PHP Startup: in Unknown on line 0解决办法
  • 红冲以前年度暂估成本如何做账
  • 偷渡者视频
  • 企业接受现金捐赠如何开具发票
  • php current
  • 水养绿萝怎么养护长得才茂盛
  • uniapp微信小程序上传文件
  • 个人转让门面的法律规定
  • 悬崖雕塑
  • 公司的财产保险包括哪些
  • php封装api
  • java中文乱码解决总结
  • uni-app ——使用uploadFile上传多张图片
  • 资产月报是会计报还是出纳报
  • 前端开发常用技术
  • 这年头不好混图片
  • html/css/javascript标准教程
  • cmd more命令
  • 新会计准则对财务工作的影响
  • vue 生产环境
  • 织梦怎么新建页面
  • 一般开发票都需要什么开票信息包括了什么?
  • 用友t3核算管理如何取消记账
  • 利用职务之便谋取私利是什么罪
  • 固定资产费用化有什么影响
  • 安全生产费会计核算办法
  • 高新企业税收减免多少
  • 多计提的工资怎么调账
  • 发票逾期未抵扣怎么办
  • 一般纳税人月销售额10万以下
  • 退回的企业所得税计入什么科目
  • u8委外怎么核销
  • sql数据库清除日志
  • mysql 模型
  • win8pe无法识别硬盘
  • 如何恢复win8系统
  • windows10x预览版
  • win8系统怎么激活
  • 微软商店更新错误
  • linux查看指定内容
  • 微软输入法拼音
  • linux用户登录
  • jquery 拖拽布局
  • 主流安卓开发
  • android图形
  • opengl 2
  • [android] intent实例
  • html如何用css
  • python列表组成字符串
  • Unity 使用WWW类同步加载资源
  • android下拉刷新上拉加载
  • android:exported 属性详解
  • 油票增值税专用发票几个点开
  • 广州税务局前局长是谁
  • 全电发票
  • 吉林省地方税务局单位职工集资建房免征营业税
  • 如何加强木材加工质量
  • 河南省纳税服务平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设