感觉入门前端了 2333，
最近在家实验了一个想法，并第一次在 NPM 上发布了一个 Package 😀。
关于想法：
- 前段时间最新发布的 React 19 才支持异步组件的渲染
(...) => Promise<ReactNode>
- 然而这个功能与
Next.js 等服务端渲染 (SSR) 绑定，纯客户端是不支持的
- 难道 React 官方搞不定吗？
- 🤔 我来尝试一下？
于是得到了早期阶段成果：
- 手搓了一个 Demo 网页：https://shao.fun/react-client-async
- 发布 NPM 包：将 Demo 封装为了 Hook 和 Component
- 相比同类型的 Package，这个方案支持任意异步，支持中断信号 (AbortSignal)
- 自动支持组件重渲染或组件卸载 (Unmount) 时的信号中断
- 自动记忆化异步函数，减少不必要的重新加载
- 提供异步控制器 (
load returns promise and stop with reason)
- 结合
AbortSignal 的错误处理
项目 README 翻译为中文版如下：
⚛️⏳React Async for Client
👋 介绍
这个包帮助你在不需要迁移到 ⚛️ React 19 和服务端渲染的情况下使用异步函数！
- ✨ 支持实用钩子来创建和渲染异步任务。
- ✨ 支持
AbortSignal 并在重新渲染时自动中止。
🚀 安装
npm i react-client-async
✅ useAsync 钩子
你可以使用 useAsync 钩子来创建一个任务。
console.log(useAsync(fn, args, options));
✅ Async 组件
你可以使用 Async 组件来渲染一个异步组件。$$
<Async
$fc={fc} // 可以是一个异步函数组件
$waiting={waiting} // 等待组件
$fallback={fallback} // 回退组件
{...props} // 异步函数组件的属性
/>
🎬 Demo 递归异步组件
轻松 包装 一个递归异步组件并对其进行记忆化。
const Rec: FC<{ n: number }> = wrap(
async ({ [$signal]: signal, n }) =>
// 退出递归
(n <= 0) ? 0 : (
// 延迟递归
<>
{await delay(99, signal)}
{n} <Rec n={n - 1} /> {n}
</>
)
);
⏳ 下一步是什么？
- ⏳
useAsyncIterable 钩子
- ⏳
AsyncIterable 组件
async function* IterableComponent() {
yield* OtherIterableComponent();
yield await component1();
yield await component2();
yield <div>...</div>;
}
期待你的反馈或贡献！🚀🚀🚀