建站
咨詢
售后
建站咨詢
新聞中心
大家好，我卡頌。
創(chuàng)新互聯(lián)公司從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目做網(wǎng)站、成都網(wǎng)站制作網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元長春做網(wǎng)站,已為上家服務(wù),為長春各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
下面這個(gè)React組件代碼，用到3個(gè)use關(guān)鍵詞，你理解他們的作用嗎？
'use client'
function App() {
using data = use(ctx);
// ...
}真是幾天不寫React，語法都看不懂了。本文就來聊聊這幾個(gè)use關(guān)鍵詞各自的意義。
use client
首先是位于代碼頂部的'use client'聲明，使用方式類似于嚴(yán)格模式的聲明：
'use strict';
// 此處是嚴(yán)格模式下的JavaScript代碼'use client'聲明是RSC（React Server Component，服務(wù)端組件）協(xié)議中的定義。
啟用了RSC的React應(yīng)用，所有組件默認(rèn)在服務(wù)端渲染（可以通過Next v13體驗(yàn)），只有聲明'use client'的組件文件，會在前端渲染。
假設(shè)我們的React應(yīng)用組件結(jié)構(gòu)如下，其中紅色代表「服務(wù)端組件」，藍(lán)色代表「客戶端組件」（聲明'use client'）：
那么當(dāng)應(yīng)用打包后，D、E組件會打包成獨(dú)立文件。在前端，React可以直接渲染A、B、C組件。但是對于D、E，需要以JSONP的形式請求回組件代碼再渲染。
完整執(zhí)行邏輯如下：
using關(guān)鍵字
接下來是data變量前的using關(guān)鍵字：
using data = use(ctx);using關(guān)鍵字是tc39提案ECMAScript Explicit Resource Management[1]提出的，用于為各種資源（內(nèi)存、I/O等）提供統(tǒng)一的生命周期管理（何時(shí)分配、何時(shí)釋放等）。
同時(shí)，TS v5.2率先引入了這個(gè)關(guān)鍵字。所以，接下來的講解我們以TS中的using關(guān)鍵詞為準(zhǔn)。
using的作用有點(diǎn)類似useEffect的destroy函數(shù)。當(dāng)我們在useEffect的create函數(shù)綁定了事件后，可以在destroy函數(shù)解綁：
function App() {
useEffect(() => {
console.log('這里是create函數(shù)')
return () => {
console.log('這里是destroy函數(shù)')
}
}, [])
}類似的，當(dāng)我們通過using關(guān)鍵詞聲明一個(gè)包含[Symbol.dispose]方法的對象后，當(dāng)離開當(dāng)前作用域時(shí)，聲明的[Symbol.dispose]方法會執(zhí)行：
{
const getResource = () => {
return {
[Symbol.dispose]: () => {
console.log('離開啦!')
}
}
}
using resource = getResource();
}
// 代碼執(zhí)行到這里會打印 離開啦!在[Symbol.dispose]方法內(nèi)主要執(zhí)行一些釋放資源的操作。
比如，當(dāng)我們操作數(shù)據(jù)庫時(shí)，如果要考慮「操作完斷開數(shù)據(jù)庫連接」，可能會寫出如下代碼：
const db = await connectDB();
try {
// 執(zhí)行數(shù)據(jù)庫操作
} finally {
// 斷開數(shù)據(jù)庫連接
await db.close();
}如果使用using關(guān)鍵詞，代碼如下：
const connect = async () => {
const db = await connectDB();
return {
db,
[Symbol.asyncDispose]: () => db.close()
};
};
// 使用
{
using { db } = await connect();
// 執(zhí)行數(shù)據(jù)庫操作
}
// 離開作用域自動斷開連接配合async await使用，可以降低「由于忘記釋放資源造成內(nèi)存泄漏」的可能性。
use方法
最后是React v18.3之后發(fā)布的新原生hook —— use：
using data = use(ctx);這個(gè)hook可以接收兩種類型數(shù)據(jù)：
- React Context
此時(shí)use的作用與useContext一樣。
- promise
此時(shí)如果這個(gè)promise處于pending狀態(tài)，則最近一個(gè)祖先
比如，在如下代碼中，如果
function App() {
return (
loading... }>
那么，頁面會渲染如下結(jié)果：
loading...
當(dāng)請求成功后，會渲染
總結(jié)
對于開篇提到的代碼：
'use client'
function App() {
using data = use(ctx);
// ...
}表示：
- 這是個(gè)客戶端組件
- 如果傳遞給use的變量ctx是React Context，則use的作用等同于useContext。
- 如果傳遞給use的變量ctx是promise，則配合最近的
使用。 - 如果use的返回值包含[Symbol.dispose]，則App組件render完成后會執(zhí)行[Symbol.dispose]方法。
一個(gè)文件，三款use相關(guān)語法，你是不是已經(jīng)懵逼了呢？
參考資料
[1]ECMAScript Explicit Resource Management:https://github.com/tc39/proposal-explicit-resource-management。
分享題目：幾天不寫React，已經(jīng)看不懂語法了
文章源于：http://m.fisionsoft.com.cn/article/cosepsp.html
