关于前端:几天不写React已经看不懂语法了

6次阅读

共计 2060 个字符，预计需要花费 6 分钟才能阅读完成。

大家好，我卡颂。

上面这个 React 组件代码，用到 3 个 use 关键词，你了解他们的作用吗？

'use client'

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

真是几天不写 React，语法都看不懂了。本文就来聊聊这几个use 关键词各自的意义。

欢送退出人类高质量前端交换群，带飞

首先是位于代码顶部的 '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 的模式申请回组件代码再渲染。

残缺执行逻辑如下：

接下来是 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 应用，能够升高 因为遗记开释资源造成内存透露 的可能性。

最初是 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] 办法