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

55次阅读

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

大家好,我卡颂。

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

'use client'

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

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

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

use client

首先是位于代码顶部的 'use client' 申明,应用形式相似于严格模式的申明:

'use strict';
// 此处是严格模式下的 JavaScript 代码

'use client'申明是RSCReact Server Component,服务端组件)协定中的定义。

启用了 RSCReact利用,所有组件默认在服务端渲染(能够通过 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的作用有点相似 useEffectdestroy函数。当咱们在 useEffectcreate函数绑定了事件后,能够在 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 的变量 ctxReact Context,则 use 的作用等同于useContext
  • 如果传递给 use 的变量 ctxpromise,则配合最近的 <Suspense/> 应用
  • 如果 use 的返回值蕴含 [Symbol.dispose],则App 组件 render 实现后会执行 [Symbol.dispose] 办法

一个文件,三款 use 相干语法,你是不是曾经懵逼了呢?

正文完
 0