Scala.js React 中的 Callback 机制详解

Scala.js React 中的 Callback 机制详解

scalajs-react Facebook's React on Scala.JS 项目地址: https://gitcode.com/gh_mirrors/sc/scalajs-react

前言

在 Scala.js React 开发中，Callback 是一个核心概念，它帮助我们以函数式的方式处理 React 组件中的副作用。本文将深入探讨 Callback 的设计理念、使用方法以及常见模式，帮助开发者更好地理解和运用这一重要机制。

Callback 基础概念

什么是 Callback

Callback 是 Scala.js React 中封装副作用逻辑的抽象，具有以下特点：

1. 延迟执行：由 React 在适当时机异步执行（如用户点击事件或组件生命周期方法）
2. 可重复执行：可以多次运行而不会产生意外行为
3. 纯函数特性：创建时不执行任何操作，只有运行时才产生效果

Callback 类型体系

Scala.js React 提供了两种主要回调类型：

• Callback：不返回值的回调，实际上是 CallbackTo[Unit] 的别名
• CallbackTo[A]：返回类型为 A 的回调

从概念上讲，CallbackTo[A] 类似于 () => A，而 Callback 类似于 () => Unit。

创建 Callback

基本创建方式

最简单的创建方式是使用 Callback{...} 或 CallbackTo{...} 块：

val sayHello = Callback {
  println("Hello, I'll be executed asynchronously.")
  println("Bye!")
}

处理副作用

任何不纯的操作（如访问 DOM、AJAX 请求或全局变量）都必须放在 Callback 内部：

object Auth {
  private var _isUserLoggedIn = false

  val isUserLoggedIn: CallbackTo[Boolean] =
    CallbackTo(_isUserLoggedIn)

  val login: Callback =
    Callback(_isUserLoggedIn = true)
}

组件状态操作

通过组件的 .setState 或 .modState 方法可以直接获得 Callback：

myComponent.setState(Person(1001, "Bob")) // 返回一个 Callback

实用创建方法

Callback 伴生对象提供了多种便捷方法：

// 控制台日志输出
Callback.log("Hello Console reader.")

// 标记未实现的回调
Callback.TODO("AJAX not implemented yet")

// 返回纯值而不执行任何操作
CallbackTo.pure(0)

Callback 实用工具方法

创建 Callback 后，可以使用多种实用方法：

• .attempt：捕获回调中的错误
• .async/.delay(n)：异步执行
• .logResult：打印回调结果
• .logDuration：测量并记录执行时间
• .map：转换结果
• .when/.unless：条件执行

Callback 组合模式

顺序组合

最常见的组合方式是使用 >> 操作符或 for 推导式：

def greet: Callback = {
  val hello = Callback(println("Hello."))
  val bye   = Callback(println("Goodbye."))
  hello >> bye
}

高级组合方式

• Callback.sequence：顺序执行多个回调
• Callback.traverse：对集合执行相同回调
• 各种 Monadic 操作符（*>, <*, >>, <<, >>= 等）

操作符解读

• >>：顺序组合，类似命令式编程中的 ;
• >>=：flatMap 的别名，用于链式操作

val a = Callback(println("Start"))
val b = CallbackTo(300)
val c = (i: Int) => Callback(println("Input = " + i))

val x = a >> b >>= c

函数式编程思维

等式推理

Callback 支持引用透明性，使得代码重构更加安全：

val ha = Callback(print("ha"))
val haha1 = ha >> ha
val haha2 = Callback(print("ha")) >> Callback(print("ha"))
// haha1 和 haha2 完全等价

渐进式学习

对于初学者，可以先将命令式代码包装在 Callback 中：

// 命令式
def speak(): Unit = {
  println("Hello!")
  println("Goodbye...")
}

// 函数式包装
def speak = Callback {
  println("Hello!")
  println("Goodbye...")
}

常见错误与解决方案

错误1：构造时执行

错误做法：

def increment(): Callback = {
  $.modState(_ + 1).runNow()  // 错误：在构造时执行
  Callback.log("Scheduled state increment by 1")
}

正确做法：

val increment: Callback =
  $.modState(_ + 1) >>
  Callback.log("Scheduled state increment by 1")

错误2：构造时副作用

错误做法：

def grantPrivateAccess = {
  val rule: js.Any = global.window.localStorage.getItem("token")  // 构造时读取
  CallbackTo(rule != null)
}

正确做法：

val grantPrivateAccess = CallbackTo {
  val rule: js.Any = global.window.localStorage.getItem("token")
  rule != null
}

错误3：不必要的函数包装

避免使用 () => Callback，直接传递 Callback 实例即可。

与 Future 的交互

当需要与 Scala Future 或 JS Promise 交互时，应使用 AsyncCallback：

| 输入 | 转换方法 | 输出 | | ------------------------- | ----------------------- | --------------------- | | => Future[A] | AsyncCallback.fromFuture(f) | AsyncCallback[A] | | AsyncCallback[A] | cb.unsafeToFuture() | Future[A] | | CallbackTo[A] | cb.asAsyncCallback | AsyncCallback[A] |

重要提示：从 Future 转换时，确保捕获的是生成 Future 的函数，而不是单个实例：

// 正确
AsyncCallback.fromFuture(queryServer)

// 错误
val f = queryServer
AsyncCallback.fromFuture(f)

总结

Scala.js React 中的 Callback 机制提供了一种类型安全、函数式的方式来处理 React 应用中的副作用。通过理解其设计理念和正确使用模式，开发者可以构建更加可靠、易于维护的 React 组件。记住关键原则：将副作用封装在 Callback 内部，避免构造时执行，合理使用组合操作符。

scalajs-react Facebook's React on Scala.JS 项目地址: https://gitcode.com/gh_mirrors/sc/scalajs-react