Scala.js React 项目中的效果无关性设计指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00657/article/details/148971268

Scala.js React 项目中的效果无关性设计指南

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

前言

在 Scala.js React 生态系统中，效果（Effect）处理是一个核心概念。本文将深入探讨如何构建效果无关（Effect-Agnostic）的库，让你的代码能够灵活适配不同的效果类型，而不局限于特定的实现。

什么是效果无关性？

效果无关性是指代码不依赖于特定的效果实现（如 Callback、Future、IO 等），而是通过抽象允许用户自行选择效果类型。这种设计带来了更好的灵活性和可重用性。

构建效果无关库的基础准备

1. 项目依赖调整

首先需要调整项目依赖，移除对具体效果实现的依赖：

libraryDependencies ++= Seq(
  "japgolly.scalajs-react" %%% "core-generic"        % "版本号",
  "japgolly.scalajs-react" %%% "util-dummy-defaults" % "版本号" % Provided
)

2. 静态代码分析配置

为了确保代码兼容性，需要配置 Scalafix 进行静态分析：

添加插件到 project/plugins.sbt:

addSbtPlugin("ch.epfl.scala" % "sbt-scalafix" % "0.9.29")

创建 scalafix.sbt 配置文件
创建 .scalafix.conf 规则文件

效果处理模式转换

1. 方法参数中的效果处理

传统方式（使用具体 Callback）:

def oldWay(c: Callback): Unit = c.runNow()

效果无关方式:

import japgolly.scalajs.react.util.Effect.Dispatch

def newWay[F[_]](f: F[Unit])(implicit x: Dispatch[F]): Unit = 
  x.dispatch(f)

这种方式不仅支持同步效果，也支持异步效果。

2. 同步效果处理

传统方式:

def oldWay[A](c: CallbackTo[A]): A = c.runNow()

效果无关方式:

import japgolly.scalajs.react.util.Effect.Sync

def newWay[F[_], A](f: F[A])(implicit x: Sync[F]): A =
  x.runSync(f)

3. 异步效果处理

传统方式:

def oldWay_promise[A](c: AsyncCallback[A]): js.Promise[A] =
  c.unsafeToJsPromise()

效果无关方式:

import japgolly.scalajs.react.util.Effect.Async

def newWay_promise[F[_], A](f: F[A])(implicit x: Async[F]): js.Promise[A] =
  x.toJsPromise(f)()

效果生成模式

1. 静态方法生成效果

传统方式:

def oldWay(n: Int): CallbackTo[Int] = CallbackTo(n * n)

效果无关方式:

import japgolly.scalajs.react.util.Effect.Sync

def newWay[F[_]](n: Int)(implicit x: Sync[F]): F[Int] =
  x.delay(n * n)

2. 类中生成效果

关键点：不能简单地替换为默认效果类型，需要特殊处理以避免链接错误。

解决方案：

创建状态容器类管理可变状态
使用泛型类处理任意效果类型
提供默认实现保持向后兼容

3. trait 中生成效果

与类处理类似，但需要注意：

使用抽象成员提供效果实例和状态
提供默认实现
支持效果类型转换

效果修改与组合

有时需要接受一个效果，修改后返回新效果：

传统方式:

def oldWay[A](c: CallbackTo[A]): CallbackTo[Option[A]] =
  c.map(Option(_))
    .flatmap(o => Callback { println("Result is " + o); o })

效果无关方式:

import japgolly.scalajs.react.util.Effect.Sync

def newWay[F[_], A](f: F[A])(implicit F: Sync[F]): F[Option[A]] = {
  val fo = F.map(f)(Option(_))
  F.flatmap(fo)(o => F.delay { println("Result is " + o); o })
}

隐式语法糖

为了简化代码，提供了隐式操作符：

import japgolly.scalajs.react.util.Effect
import japgolly.scalajs.react.util.syntax._

def example(fi: F[Int])(implicit F: Effect.Sync[F]): F[Int] =
  for {
    i <- fi
    j <- F.delay(123)
  } yield {
    println("Re-running fi = " + fi.runSync())
    i + j
  }