大家好，我卡頌。

下面這個(gè)React組件代碼，用到3個(gè)use關(guān)鍵詞，你理解他們的作用嗎？

'use client'

function App() {
  using data = use(ctx);
  
  // ...
}

真是幾天不寫(xiě)React，語(yǔ)法都看不懂了。本文就來(lái)聊聊這幾個(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ù)端渲染（可以通過(guò)Next v13體驗(yàn)），只有聲明'use client'的組件文件，會(huì)在前端渲染。

假設(shè)我們的React應(yīng)用組件結(jié)構(gòu)如下，其中紅色代表「服務(wù)端組件」，藍(lán)色代表「客戶端組件」（聲明'use client'）：

那么當(dāng)應(yīng)用打包后，D、E組件會(huì)打包成獨(dú)立文件。在前端，React可以直接渲染A、B、C組件。但是對(duì)于D、E，需要以JSONP的形式請(qǐng)求回組件代碼再渲染。

完整執(zhí)行邏輯如下：

using關(guān)鍵字

接下來(lái)是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)鍵字。所以，接下來(lái)的講解我們以TS中的using關(guān)鍵詞為準(zhǔn)。

using的作用有點(diǎn)類似useEffect的destroy函數(shù)。當(dāng)我們?cè)趗seEffect的create函數(shù)綁定了事件后，可以在destroy函數(shù)解綁：

function App() {
  useEffect(() => {
    console.log('這里是create函數(shù)')
    return () => {
      console.log('這里是destroy函數(shù)')
    }
  }, [])
}

類似的，當(dāng)我們通過(guò)using關(guān)鍵詞聲明一個(gè)包含[Symbol.dispose]方法的對(duì)象后，當(dāng)離開(kāi)當(dāng)前作用域時(shí)，聲明的[Symbol.dispose]方法會(huì)執(zhí)行：

{
  const getResource = () => {
    return {
      [Symbol.dispose]: () => {
        console.log('離開(kāi)啦!')
      }
    }
  }
  using resource = getResource();
}
// 代碼執(zhí)行到這里會(huì)打印 離開(kāi)啦!

在[Symbol.dispose]方法內(nèi)主要執(zhí)行一些釋放資源的操作。

比如，當(dāng)我們操作數(shù)據(jù)庫(kù)時(shí)，如果要考慮「操作完斷開(kāi)數(shù)據(jù)庫(kù)連接」，可能會(huì)寫(xiě)出如下代碼：

const db = await connectDB();
try {
  // 執(zhí)行數(shù)據(jù)庫(kù)操作
} finally {
  // 斷開(kāi)數(shù)據(jù)庫(kù)連接
  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ù)庫(kù)操作
} 
// 離開(kāi)作用域自動(dòng)斷開(kāi)連接

配合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è)祖先<Suspense/>組件可以渲染fallback。

比如，在如下代碼中，如果<Cpn />組件或其子孫組件使用了use，且promise處于pending狀態(tài)（比如請(qǐng)求后端資源）：

function App() {
  return (
    <div>
      <Suspense fallback={<div>loading...</div>}>
        <Cpn />
      </Suspense>
    </div>
  );
}

那么，頁(yè)面會(huì)渲染如下結(jié)果：

<div>
  <div>loading...</div>
</div>

當(dāng)請(qǐng)求成功后，會(huì)渲染<Cpn />。

總結(jié)

對(duì)于開(kāi)篇提到的代碼：

'use client'

function App() {
  using data = use(ctx);
  
  // ...
}

表示：

• 這是個(gè)客戶端組件
• 如果傳遞給use的變量ctx是React Context，則use的作用等同于useContext。
• 如果傳遞給use的變量ctx是promise，則配合最近的<Suspense/>使用。
• 如果use的返回值包含[Symbol.dispose]，則App組件render完成后會(huì)執(zhí)行[Symbol.dispose]方法。

一個(gè)文件，三款use相關(guān)語(yǔ)法，你是不是已經(jīng)懵逼了呢？

參考資料

[1]ECMAScript Explicit Resource Management:https://github.com/tc39/proposal-explicit-resource-management。