将 JAVA爱家 标为“隆哥蒙⭐”第三天数接到该文预览
原文:魔法师卡颂(ID:gh_52d0bec584f9)
上面那个React模块标识符,加进3个use关键字,你认知她们的促进作用吗?
use clientfunction App(){
using data = use(ctx);
// …}
啊两天不写React,句法都搞不懂了。责任编辑就来谈谈这两个use关键字各别的象征意义。
use client
具体来说是坐落于标识符顶端的use client新闻稿,采用形式近似于严苛商业模式的新闻稿:
use strict;
// 该处是严苛商业模式下的JavaScript标识符use client新闻稿是RSC(React Server Component,服务器端模块)协定中的表述。
投入采用了RSC的React应用领域,大部份模块预设在服务器端图形(能透过Next v13新体验),多于新闻稿use client的模块文档,会在后端图形。
假设我们的React应用领域模块结构如下,其中红色代表「服务器端模块」,蓝色代表「客户端模块」(新闻稿use client):
那么当应用领域打包后,D、E模块会打包成独立文档。在后端,React能直接图形A、B、C组件。但是对于D、E,需要以JSONP的形式请求回模块标识符再图形。
完整执行逻辑如下:
using关键字
接下来是data变量前的using关键字:
using data = use(ctx);
using关键字是tc39提案ECMAScript Explicit Resource Management[1]提出的,用于为各种资源(内存、I/O等)提供统一的生命周期管理(何时分配、何时释放等)。
同时,TS v5.2率先引入了那个关键字。所以,接下来的讲解我们以TS中的using关键字为准。
using的促进作用有点类似useEffect的destroy函数。当我们在useEffect的create函数绑定了事件后,能在destroy函数解绑:
function App(){
useEffect(() =>{
console.log(这里是create函数)
return () =>{
console.log(这里是destroy函数)
}
}, [])
}
类似的,当我们透过using关键字新闻稿一个包含[Symbol.dispose]方法的对象后,当离开当前促进作用域时,新闻稿的[Symbol.dispose]方法会执行:
{
const getResource = () =>{
return{
[Symbol.dispose]: () =>{
console.log(离开啦!)
}
}
}
using resource = getResource();
}
// 标识符执行到这里会打印 离开啦!在[Symbol.dispose]方法内主要执行一些释放资源的操作。
比如,当我们操作数据库时,如果要考虑「操作完断开数据库连接」,可能会写出如下标识符:
constdb =awaitconnectDB();
try{
// 执行数据库操作} finally{
// 断开数据库连接 awaitdb.close();
}
如果采用using关键字,标识符如下:
constconnect =async() => {
const db = awaitconnectDB();
return{
db,
[Symbol.asyncDispose]: () =>db.close()
};
};
// 采用{
using { db } =awaitconnect();
// 执行数据库操作}
// 离开促进作用域自动断开连接配合async await采用,能降低「由于忘记释放资源造成内存泄漏」的可能性。
use方法
最后是React v18.3之后发布的新原生hook —— use:
using data = use(ctx);
那个hook能接收两种类型数据:
React Context此时use的促进作用与useContext一样。
promise此时如果那个promise处于pending状态,则最近一个祖先<Suspense/>模块能图形fallback。
比如,在如下标识符中,如果<Cpn />模块或其子孙模块采用了use,且promise处于pending状态(比如请求后端资源):
function App(){
return(
<div> <Suspense fallback={<div>loading…</div>}>
<Cpn /> </Suspense> </div>);
}
那么,页面会图形如下结果:
<div> <div>loading…</div></div>当请求成功后,会图形<Cpn />。
总结
对于开篇提到的标识符:
use clientfunction App(){
using data = use(ctx);
// …}
表示:
这是个客户端模块
如果传递给use的变量ctx是React Context,则use的作用等同于useContext
如果传递给use的变量ctx是promise,则配合最近的<Suspense/>采用
如果use的返回值包含[Symbol.dispose],则App模块render完成后会执行[Symbol.dispose]方法
一个文档,三款use相关句法,你是不是早已懵逼了呢?
参考资料
[1]ECMAScript Explicit Resource Management: https://github.com/tc39/proposal-explicit-resource-management