大家好,我卡颂。
上面这个 React
组件代码,用到 3 个 use
关键词,你了解他们的作用吗?
'use client'
function 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 提出的,用于为各种资源(内存、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]
办法内次要执行一些开释资源的操作。
比方,当咱们操作数据库时,如果要思考 操作完断开数据库连贯,可能会写出如下代码:
const db = await connectDB();
try {// 执行数据库操作} finally {
// 断开数据库连贯
await db.close();}
如果应用 using
关键词,代码如下:
const connect = async () => {const db = await connectDB();
return {
db,
[Symbol.asyncDispose]: () => db.close()
};
};
// 应用
{using { db} = await connect();
// 执行数据库操作
}
// 来到作用域主动断开连接
配合 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 client'
function App() {using data = use(ctx);
// ...
}
示意:
- 这是个客户端组件
- 如果传递给
use
的变量ctx
是React Context
,则use
的作用等同于useContext
- 如果传递给
use
的变量ctx
是promise
,则配合最近的<Suspense/>
应用 - 如果
use
的返回值蕴含[Symbol.dispose]
,则App
组件render
实现后会执行[Symbol.dispose]
办法
一个文件,三款 use
相干语法,你是不是曾经懵逼了呢?