大家好，我卡颂。
上面这个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相干语法，你是不是曾经懵逼了呢？