ReactScala中是否有useState实现多组件共享数据？

首先要指出你自己写的useState实现存在两个核心问题：

1. Scala中val是不可变的，d = x这行代码无法通过编译；
2. 即便改成var，这种写法也无法触发组件重渲染——React（包括React Scala）的状态更新必须通知框架，才能让依赖该状态的组件重新渲染。

下面是Japgolly生态中几种可靠的多组件共享数据方案，既能避免重复HTTP请求，又能保证数据一致性：

1. 使用官方UseSharedState（推荐） #

Japgolly提供了UseSharedState专门处理跨组件共享状态，用法类似React原生的useState，但状态是全局共享的，所有使用该状态的组件会同步更新。

import japgolly.scalajs.react._
import japgolly.scalajs.react.util.DefaultEffects._
import japgolly.scalajs.react.vdom.html_<^._

// 定义数据类型（示例）
case class Data(value: String)

// 创建全局共享状态，初始值为None（对应你说的undefined）
val sharedData: UseSharedState[Option[Data]] = UseSharedState(None)

// 组件A：使用共享数据并处理请求
val ComponentA = ScalaComponent.builder[Unit]("ComponentA")
  .renderWithHooks { _ =>
    val (data, setData) = sharedData.use()

    // 仅当数据为空时发起请求，避免重复调用
    useEffectOnce {
      data match {
        case None =>
          // 模拟HTTP请求，请求完成后更新共享状态
          Callback.future(
            fetch("your-api-url")
              .map(_.text())
              .map(res => setData(Some(Data(res))))
          )
        case _ => Callback.empty
      }
    }

    // 渲染内容
    data.map(d => <.div(s"ComponentA: ${d.value}")).getOrElse(<.div("Loading..."))
  }
  .build

// 组件B：直接复用共享数据
val ComponentB = ScalaComponent.builder[Unit]("ComponentB")
  .renderWithHooks { _ =>
    val (data, _) = sharedData.use()
    data.map(d => <.div(s"ComponentB: ${d.value}")).getOrElse(<.div("Loading..."))
  }
  .build

这个方案的优势是简洁，官方维护，自动处理组件重渲染逻辑，确保所有使用sharedData的组件同步更新。

2. Provider + Context 模式（适合复杂状态逻辑） #

如果共享状态需要结合业务逻辑（比如复杂的状态更新规则），可以用Context + Provider封装状态，将状态管理集中在顶层Provider，子组件通过Context获取状态和更新方法。

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import japgolly.scalajs.react.util.DefaultEffects._

case class Data(value: String)
case class SharedState(data: Option[Data])
sealed trait SharedAction
case object FetchData extends SharedAction
case class UpdateData(newData: Data) extends SharedAction

// 定义Context，传递状态更新方法
val SharedContext = ReactContext[SharedAction => Callback]

// 顶层Provider组件，管理全局状态
val SharedProvider = ScalaComponent.builder[Unit]("SharedProvider")
  .initialState(SharedState(None))
  .renderBackend[SharedBackend]
  .build

class SharedBackend($: BackendScope[Unit, SharedState]) {
  // 处理状态更新动作
  def handleAction(action: SharedAction): Callback = action match {
    case FetchData =>
      $.state.flatMap { state =>
        if (state.data.isEmpty) {
          // 发起请求并更新全局状态
          Callback.future(
            fetch("your-api-url")
              .map(_.text())
              .map(res => $.modState(_.copy(data = Some(Data(res)))))
        } else Callback.empty
      }
    case UpdateData(newData) =>
      $.modState(_.copy(data = Some(newData)))
  }

  // 渲染子组件，将更新方法注入Context
  def render(state: SharedState) =
    SharedContext.provide(handleAction)(<.div(ComponentA(), ComponentB()))
}

// 组件A：消费Context并触发请求
val ComponentA = ScalaComponent.builder[Unit]("ComponentA")
  .renderWithHooks { _ =>
    val dispatch = SharedContext.consume
    val state = $.state.value

    useEffectOnce(dispatch(FetchData))

    state.data.map(d => <.div(s"ComponentA: ${d.value}")).getOrElse(<.div("Loading..."))
  }
  .build

// 组件B：消费Context展示数据
val ComponentB = ScalaComponent.builder[Unit]("ComponentB")
  .renderWithHooks { _ =>
    val state = $.state.value
    state.data.map(d => <.div(s"ComponentB: ${d.value}")).getOrElse(<.div("Loading..."))
  }
  .build

这个模式适合状态逻辑复杂的场景，所有状态更新都通过Provider统一处理，子组件只需要关注UI渲染和触发动作。

3. 自定义可观察状态容器（灵活定制） #

如果需要完全自定义状态管理逻辑，可以实现一个简单的发布订阅容器，结合React副作用处理状态订阅和更新：

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.html_<^._
import scala.collection.mutable.ListBuffer

case class Data(value: String)

// 自定义可观察状态容器
class ObservableState[A](initialValue: A) {
  private var currentValue: A = initialValue
  private val subscribers = ListBuffer[A => Callback]()

  def get: A = currentValue

  def set(newValue: A): Callback = {
    currentValue = newValue
    // 通知所有订阅者更新
    subscribers.foldLeft(Callback.empty)((cb, sub) => cb >> sub(newValue))
  }

  // 订阅状态变化，返回取消订阅的Callback
  def subscribe(sub: A => Callback): Callback = {
    subscribers += sub
    Callback(subscribers -= sub)
  }
}

// 创建全局共享状态实例
val sharedData = new ObservableState[Option[Data]](None)

// 组件A
val ComponentA = ScalaComponent.builder[Unit]("ComponentA")
  .renderWithHooks { _ =>
    // 用本地状态同步共享状态，触发组件重渲染
    val (localData, setLocalData) = useState(sharedData.get)

    // 订阅共享状态变化，组件卸载时自动取消订阅
    useEffectBy(() => sharedData.subscribe(newData => setLocalData(newData)))

    // 发起请求逻辑
    useEffectOnce {
      if (localData.isEmpty) {
        Callback.future(
          fetch("your-api-url")
            .map(_.text())
            .map(res => sharedData.set(Some(Data(res))))
        )
      } else Callback.empty
    }

    localData.map(d => <.div(s"ComponentA: ${d.value}")).getOrElse(<.div("Loading..."))
  }
  .build

这个方案灵活性最高，但需要自己处理订阅生命周期，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Fallenreaper