别再层层传递 React Modal 参数了（试试 react-call）

中文العربيةDeutschEnglishEspañolFrançaisहिन्दीBahasa Indonesia日本語한국어PortuguêsРусский
BBetter Stack
컴퓨터/소프트웨어AI/미래기술

Transcript

00:00:00React 刚刚出了一个非常有趣的新工具，它彻底改变了我们对于
00:00:05渲染交互式 UI 元素（如模态框、对话框或确认框）的思考方式。
00:00:11它叫做 React Call。
00:00:13如果你曾经在 React 中构建过复杂的多步表单向导、确认模态框或
00:00:18项目选择器，你一定知道管理打开状态、传递成功回调以及
00:00:24处理 Promise 会让你的代码变成一团糟的意大利面。
00:00:28但 React Call 正是为了解决这个问题而设计的。
00:00:31所以在今天的视频中，我们将一探 React Call，看看它是如何工作的，并查看
00:00:36并看一些代码示例。
00:00:37一定会很有趣，让我们开始吧。
00:00:44那么 React Call 到底是什么呢？
00:00:47嗯，它是一个轻量级的小工具，允许你像调用异步函数一样
00:00:52来调用 React 组件。
00:00:53想想浏览器原生的 window.confirm API。
00:00:57当你调用它时，代码会立即暂停，等待用户点击“确定”或“取消”，然后
00:01:03直接返回一个布尔值。
00:01:06它将你的业务逻辑完全保持在调用者本地。
00:01:09而 React Call 将这种直观的心智模型直接引入了现代 React 世界。
00:01:16你不再需要创建像 isModalOpen 这样的独立状态变量，也不需要传递 onClose 或
00:01:22onSubmit 属性，或是设置复杂的 Context Provider 或 Portals，你只需 await
00:01:29组件的响应即可。
00:01:30在底层，它抽象了 Promise 管理，开箱即用地处理类型请求和响应，
00:01:36并完全支持热模块替换（HMR），因此你的开发工作流始终
00:01:41保持快速。
00:01:42它带来了三个核心概念：根节点与栈（Root and Stack）、Upsert 以及突变流（Mutation Flow）。
00:01:48第一个主要概念是根节点与栈。
00:01:50使用 React Call，你创建的可调用组件不再只是一个函数。
00:01:54它实际上充当了应用程序树中的挂载点。
00:01:58你可以将该组件作为根标签放置在任何可见的地方，比如你的 App 文件或高层级的
00:02:03布局文件中，它就像一个监听器一样存在。
00:02:06当你触发多次调用时，React Call 会使用内部栈来管理它们，并
00:02:11自动处理每个活动实例的渲染。
00:02:14它还能处理关闭时的退出动画，并保持实例隔离，这样它们
00:02:20就不会相互冲突。
00:02:22接下来是 Upsert，这对于单例 UI 模式来说绝对是救星。
00:02:27通常情况下，如果你多次调用一个组件，它会向栈中压入一个新实例。
00:02:33但如果你正在构建一个全局通知 Toast、加载遮罩或进度
00:02:39指示器，并且希望屏幕上始终只有一个实例呢？
00:02:45这时，你可以执行 upsert 而不是 call。
00:02:48如果实例已经处于活动状态，它会平滑地使用你的新数据即时更新
00:02:52现有组件，而不是产生一个重复的组件。
00:02:56最后是突变流（Mutation Flow）。
00:02:58这个库包含一个内置的 useMutationFlow hook，专门用于将你的可调用
00:03:04UI 直接与异步操作挂钩。
00:03:06如果你有一个确认模态框，在提交时会触发繁重的后端 API 请求，那么这个 hook
00:03:12可以直接为你管理挂起状态。
00:03:15它确保模态框保持打开状态并显示加载转圈，同时异步函数运行，
00:03:21只有在 Promise 成功解析后才会正式结束调用。
00:03:25它完美地桥接了你的 UI 状态和数据突变。
00:03:29现在让我们看看他们网站上的一些实际案例，因为我觉得它们非常
00:03:34直观。
00:03:36而且我认为它们也展示了实现这些功能所需的代码量其实很少。
00:03:41例如，在确认对话框中，我们只需要创建一个可调用对象。
00:03:48然后我们用 create callable hook 将组件包裹为一个高阶组件。
00:03:54然后我们就可以为按钮的点击事件传递 call 和函数。
00:04:01这就是可调用对象所需的全部内容。
00:04:04而在根节点，我们只需要导入组件本身。
00:04:08对于删除按钮，由于我们的确认组件被 create callable
00:04:14高阶函数包裹，我们可以直接在这个 handle click 函数中异步调用它。
00:04:21所以非常简洁、整齐，没什么样板代码。
00:04:26你根本不需要使用任何 Context Provider、状态变量、Redux 或 Zustand。
00:04:31如果你想深入了解有多少用例，可以查看示例
00:04:36部分，每个示例都提供了代码片段。
00:04:40其中一些甚至非常复杂，例如处理后台运行的
00:04:46异步操作的例子。
00:04:49所以你可以看看所有这些很酷的示例。
00:04:52我觉得它超级酷，而且超级轻量。
00:04:55做得好。
00:04:56好了，各位。
00:04:57这就是 React Call 的简单介绍。
00:04:59当然，你自己也可以编写一个基本的自定义 Promise 封装或单个模态框。
00:05:06但我认为这个库完美地处理了所有棘手的边缘情况，比如处理栈中的多个
00:05:11活动实例，或者通过 upsert 更新单例，并将 UI 状态与繁重的
00:05:17后端突变同步。
00:05:18所以我认为这是一个非常好的轻量级工具，可以放在你的前端工具箱里，从而实现更简洁、
00:05:24更易读的 React 架构。
00:05:26你觉得 React Call 怎么样？
00:05:28你喜欢这种模式吗？
00:05:29你会把它用到你的项目中吗？
00:05:31在下方的评论区告诉我们吧。
00:05:33各位，如果你喜欢这种技术解析，请记得点击
00:05:37视频下方的点赞按钮。
00:05:39也别忘了订阅我们的频道。
00:05:42我是来自 BetterStack 的 Andrus，我们在下一个视频再见。
00:05:58你

Key Takeaway

React Call 引入了组件异步调用模式，通过消除层级参数传递与复杂状态管理，极大地精简了复杂交互界面的实现代码。

Highlights

  • React Call 允许开发者像调用异步函数一样调用 React 组件，简化了模态框和确认对话框的管理。

  • 此工具通过 await 语法处理组件响应，消除了对 isModalOpen 状态变量、onClose 回调及 Context Provider 的需求。

  • 内置的根节点与栈机制能够自动管理多个活动实例的渲染、退出动画及实例隔离。

  • Upsert 功能支持在不重复创建组件的情况下，即时更新 Toast 等全局单例 UI。

  • useMutationFlow 钩子将 UI 状态与后端异步请求直接同步，自动管理加载状态并在 Promise 解析后结束调用。

Timeline

React Call 的核心理念

  • React Call 将声明式 UI 转变为异步函数调用模式。
  • 此工具消除了状态变量和属性传递的样板代码。
  • 底层抽象实现了 Promise 管理与热模块替换支持。

传统的 React 交互式 UI（如模态框）开发往往涉及复杂的 isModalOpen 状态管理与回调传递。React Call 借鉴浏览器 window.confirm API 的直观逻辑，允许开发者直接 await 组件响应。这一抽象层移除了对 Context Provider、Portals 或繁琐属性钻取的依赖，使得业务逻辑能够保持在调用者本地。

三大技术核心概念

  • 根节点与栈负责挂载组件并隔离多个活动实例。
  • Upsert 功能确保单例模式 UI 仅更新数据而非重复渲染。
  • useMutationFlow 钩子处理异步请求时的加载状态同步。

React Call 通过根节点配置监听器，利用内部栈自动处理多个模态框的生命周期与退出动画。Upsert 特性专门针对 Toast 或进度指示器，在已存在实例时触发即时更新而非重复创建。useMutationFlow 则桥接了组件显示与异步 API 请求，确保在 Promise 完成前 UI 保持正确的加载状态。

实现代码与架构优势

  • 使用 create callable 钩子包裹组件即可实现异步调用。
  • 调用侧代码简洁，无需引入 Redux 或其他状态管理库。
  • 该库处理了复杂边缘情况，包括栈管理与异步突变同步。

实际应用中，开发者仅需通过 create callable 高阶函数包裹组件，即可在触发事件时进行异步调用。这种方式去除了样板代码，使得项目结构更加直观。虽然开发者可以手动编写类似的 Promise 封装，但 React Call 在处理多实例竞态、单例更新以及后端突变同步等边缘情况上提供了更成熟的解决方案。

Community Posts

No posts yet. Be the first to write about this video!

Write about this video