几天不写React，已经看不懂语法了

将 JAVA爱家 标为“隆哥蒙⭐”第三天数接到该文预览

原文：魔法师卡颂（ID：gh_52d0bec584f9）

上面那个React模块标识符，加进3个use关键字，你认知她们的促进作用吗？

{

  using data = use(ctx);

}

啊两天不写React，句法都搞不懂了。责任编辑就来谈谈这两个use关键字各别的象征意义。

use client

具体来说是坐落于标识符顶端的use client新闻稿，采用形式近似于严苛商业模式的新闻稿：

;

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函数解绑：

{

 {

)

 {

)

    }

  }, [])

}

类似的，当我们透过using关键字新闻稿一个包含[Symbol.dispose]方法的对象后，当离开当前促进作用域时，新闻稿的[Symbol.dispose]方法会执行：

{

 {

 {

 {

)

      }

    }

  }

  using resource = getResource();

}

在[Symbol.dispose]方法内主要执行一些释放资源的操作。

比如，当我们操作数据库时，如果要考虑「操作完断开数据库连接」，可能会写出如下标识符：

 connectDB();

 {

 {

 db.close();

}

如果采用using关键字，标识符如下：

 () => {

 connectDB();

 {

    db,

 db.close()

  };

};

{

 connect();

} 

配合async await采用，能降低「由于忘记释放资源造成内存泄漏」的可能性。

use方法

最后是React v18.3之后发布的新原生hook —— use：

using data = use(ctx);

那个hook能接收两种类型数据：

此时use的促进作用与useContext一样。

此时如果那个promise处于pending状态，则最近一个祖先<Suspense/>模块能图形fallback。

比如，在如下标识符中，如果<Cpn />模块或其子孙模块采用了use，且promise处于pending状态（比如请求后端资源）：

{

 (

  );

}

那么，页面会图形如下结果：

当请求成功后，会图形<Cpn />。

总结

对于开篇提到的标识符：

{

  using data = use(ctx);

}

表示：

这是个客户端模块

如果传递给use的变量ctx是React Context，则use的作用等同于useContext

如果传递给use的变量ctx是promise，则配合最近的<Suspense/>采用

如果use的返回值包含[Symbol.dispose]，则App模块render完成后会执行[Symbol.dispose]方法

一个文档，三款use相关句法，你是不是早已懵逼了呢？

参考资料