react扩展

​

1.refHook

类组件的ref定义。

​编辑

​编辑

两种方式一种是直接回调函数设置一个this.***Node节点=event,event为当前ref所在的标签元素,另一种是直接通过React.createRef方法去创建一个myRef在this实例对象中,然后直接ref={this.myRef}

函数组件和类组件第二种基本上一致

​编辑

通过React.useRef创建一个ref对象,然后在标签里面添加。

2.fragment(翻译碎片)

​编辑

​编辑

Fragment标签不会被渲染成真实Dom,而且只有一个属性key值(如果需要被遍历的情况下也可以使用)

和直接<></>包裹效果一样,但是遍历的时候需要用Fragment的key。

3.context

​编辑

我们有时候希望祖父组件给孙子组件传参数,如果用props一层层的传很繁琐,这时候需要用到context,相当于一个简便化的redux。

首先用React.createContext()定义一个Mycontext方法,解构赋值从里面拿出Provider以及Consumer两个方法。

用Provider包裹子组件,然后传递的参数是value={}这种格式,这样B组件以及B组件的子组件就可以拿到value里面的参数了,但是用之前需要声明接收。

类组件用static contextType = Mycontext,然后可以通过this.context拿到value对象。

函数组件用Consumer方法,

​编辑

用图片里面的Consumer标签包裹然后js表达式里面用参数为value的箭头函数返回我们想要展示的value对象中的数据。

4.PureComponent(组件优化)

我们在使用组件的时候,在更改一些父组件的状态后,会重新调用所有子组件的render去刷新然后重新渲染组件,这是非常多余的行为,我们通过下面的代码去优化。

​编辑

我们用shouldComponentUpdata中的参数nextProps与nextState和this.state以及this.props是否相同来判断是否取执行更新组件重新调用render。也可以直接用PureComponent自动封装了判断是否updata重新渲染render。

一个小重点是,当我们在使用setState的时候,我们必须更新的时候去拿一个新生成的state对象去合并更新,如果我们直接用unshitf或者const obj =

​编辑

这种图片里面的方式更新,直接去修改了原来的state,但是这时候地址是没有变化的,所以与({})效果一样,认为地址没变,返回的还是原来的state。

5.renderProps

​编辑

我们通常在A组件添加子组件直接用闭合标签去添加之后在调用A组件的时候会自动渲染调用B组件的render然后渲染到页面上,现在我们可以用这种作为children传过去使用,但是这种无法传A组件里面的props给B组件,所以我们用另一种方法<A/render={(value)=>{return({value})}}>,然后传一个B组件作为render函数的返回值,以及可以调用的时候传参数过去。
​

相关推荐
中文呀19 分钟前
三维 GIS 离线缓存实战:逆向 CesiumOfflineCache,并亲手为它补上"自动更新"能力
前端
前进前进前进1 小时前
TRAE 全链路实战:做了一个警示牌一键生成器:纯 Canvas、单文件、零依赖
前端
小万7422 小时前
God‘s Eye View 深度解析:15 路公开信号 + CesiumJS 的浏览器级 OSINT 控制台,60 帧渲染的“真实间谍卫星模拟器”
前端
IT星宿2 小时前
浏览器标签页全是一个图标:我用名字哈希生成 favicon,让每个项目都有身份标识
前端
全栈项目管理程序猿2 小时前
ArcGIS JS 基础教程(32):体元系列 - VoxelSlice 体元切片
前端·javascript
拖孩4 小时前
AI 帮我写的小程序「厨菜记」上线满月了,挣了两百块!!!
前端·后端·微信小程序
用户360055579004 小时前
Kestrel_VLLM - 13 · 为什么排除 MoE FFN Tiling 与 Tensor Core
前端
Hilaku5 小时前
AI 流式输出都用 SSE,什么时候必须换 WebSocket?
前端·javascript·程序员
奇牙coding5 小时前
Codex CLI 升级后多文件编辑静默失效:config.yaml 枚举变更排查与修复指南
java·前端·javascript·ai
小羊没烦恼!5 小时前
Ajax与JSON的一些总结
android·java·前端·数据库·mysql·算法·okhttp