前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >第一个可以在条件语句中使用的原生hook诞生了

第一个可以在条件语句中使用的原生hook诞生了

作者头像
公众号@魔术师卡颂
发布2022-11-22 14:46:11
7220
发布2022-11-22 14:46:11
举报
文章被收录于专栏:魔术师卡颂

大家好,我卡颂。

在10月13日的first-class-support-for-promises RFC[1]中,介绍了一种新的hook —— use

use什么?就是use,这个hook就叫use。这也是第一个:

  • 可以在条件语句中书写的hook
  • 可以在其他hook回调中书写的hook

本文来聊聊这个特殊的hook

use是什么

我们知道,async函数会配合await关键词使用,比如:

代码语言:javascript
复制
async function load() {
  const {name} = await fetchName();
  return name;
}

类似的,在React组件中,可以配合use起到类似的效果,比如:

代码语言:javascript
复制
function Cpn() {
  const {name} = use(fetchName());
  return <p>{name}</p>;
}

可以认为,use的作用类似于:

  • async await中的await
  • generator中的yield

use作为「读取异步数据的原语」,可以配合Suspense实现「数据请求、加载、返回」的逻辑。

举个例子,下述例子中,当fetchNote执行异步请求时,会由包裹NoteSuspense组件渲染「加载中状态」

当请求成功时,会重新渲染,此时note数据会正常返回。

当请求失败时,会由包裹NoteErrorBoundary组件处理失败逻辑。

代码语言:javascript
复制
function Note({id}) {
  const note = use(fetchNote(id));
  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
    </div>
  );
}

其背后的实现原理并不复杂:

  1. Note组件首次renderfetchNote发起请求,会throw promise,打断render流程
  2. Suspense fallback作为渲染结果
  3. promise状态变化后重新触发渲染
  4. 根据note的返回值渲染

实际上这套「基于promise的打断、重新渲染流程」当前已经存在了。use的存在就是为了替换上述流程。

与当前React中已经存在的上述「promise流程」不同,use仅仅是个「原语」primitives),并不是完整的处理流程。

比如,use并没有「缓存promise」的能力。

举个例子,在下面代码中fetchTodo执行后会返回一个promiseuse会消费这个promise

代码语言:javascript
复制
async function fetchTodo(id) {
  const data = await fetchDataFromCache(`/api/todos/${id}`);
  return {contents: data.contents};
}

function Todo({id, isSelected}) {
  const todo = use(fetchTodo(id));
  return (
    <div className={isSelected ? 'selected-todo' : 'normal-todo'}>
      {todo.contents}
    </div>
  );
}

Todo组件的id prop变化后,触发fetchTodo重新请求是符合逻辑的。

但是当isSelected prop变化后,Todo组件也会重新renderfetchTodo执行后会返回一个新的promise

返回新的promise不一定产生新的请求(取决于fetchTodo的实现),但一定会影响React接下来的运行流程(比如不能命中性能优化)。

这时候,需要配合React提供的cache API(同样处于RFC)。

下述代码中,如果id prop不变,fetchTodo始终返回同一个promise

代码语言:javascript
复制
const fetchTodo = cache(async (id) => {
  const data = await fetchDataFromCache(`/api/todos/${id}`);
  return {contents: data.contents};
});

use的潜在作用

当前,use的应用场景局限在「包裹promise」

但是未来,use会作为客户端中处理异步数据的主要手段,比如:

  • 处理context

use(Context)能达到与useContext(Context)一样的效果,区别在于前者可以在条件语句,以及其他hook回调内执行。

  • 处理state

可以利用use实现新的原生状态管理方案:

代码语言:javascript
复制
const currentState = use(store);
const latestValue = use(observable);

为什么不使用async await

本文开篇提到,use原语类似async await中的await,那为什么不直接使用async await呢?类似下面这样:

代码语言:javascript
复制
// Note 是 React 组件
async function Note({id, isEditing}) {
  const note = await db.posts.get(id);
  return (
    <div>
      <h1>{note.title}</h1>
      <section>{note.body}</section>
      {isEditing ? <NoteEditor note={note} /> : null}
    </div>
  );
}

有两方面原因。

一方面,async await的工作方式与React客户端处理异步时的逻辑不太一样。

await的请求resolve后,调用栈是从await语句继续执行的(generatoryield也是这样)。

而在React中,更新流程是从根组件开始的,所以当数据返回后,更新流程是从根组件从头开始的。

改用async await的方式势必对当前React底层架构带来挑战。最起码,会对性能优化产生不小的影响。

另一方面,async await这种方式接下来会在Server Component中实现,也就是异步的服务端组件。

服务端组件与客户端组件都是React组件,但前者在服务端渲染(SSR),后者在客户端渲染(CSR),如果都用async await,不太容易从代码层面区分两者。

总结

use是一个「读取异步数据的原语」,他的出现是为了规范React在客户端处理异步数据的方式。

既然是原语,那么他的功能就很底层,比如不包括请求的缓存功能(由cache处理)。

之所以这么设计,是因为React团队并不希望开发者直接使用他们。这些原语的受众是React生态中的其他库。

比如,类似SWRReact-Query这样的请求库,就可以结合use,再结合自己实现的请求缓存策略(而不是使用React提供的cache方法)

各种状态管理库,也可以将use作为其底层状态单元的容器。

值得吐槽的是,Hooks文档中hook的限制那一节恐怕得重写了。

参考资料

[1]

first-class-support-for-promises RFC: https://github.com/acdlite/rfcs/blob/first-class-promises/text/0000-first-class-support-for-promises.md

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2022-10-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 魔术师卡颂 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • use是什么
  • use的潜在作用
  • 为什么不使用async await
  • 总结
    • 参考资料
    相关产品与服务
    容器服务
    腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档