快速上手

安装

首先，请确保jorum和RxJS已经被正确的安装，并且相关的环境配置已经完成。这部分的操作在这里有所介绍。

定义BLoC

BLoC（Business Logic Component）可以理解为业务逻辑单元，是存放一组数据及其操作的容器。

听起来很高深？

其实并不，BLoC其实只是一个普通的类，只是我们需要用@bloc修饰器来修饰它，这样jorum才能够将其识别。

import {bloc} from 'jorum'

@bloc
export class FooBloc {

}

往BLoC中添加数据

在定义好BLoC后，我们可以在其中添加数据：

@bloc
export class FooBloc {
  data$ = new BehaviorSubject(1)

  constructor() {
    setTimeOut(() => {
      this.data$.next(2)
    }, 5000)
  }
}

这里的“数据”都是RxJS中的Observable，在这篇文档中，我们假设你已经对RxJS有所了解。

在组件中提供BLoC

现在，我们可以使用Provider组件将FooBloc加入到React的组件树中：

<Provider of={FooBloc}>
  {/*...*/}
</Provider>

Provider会自动创建和销毁一个FooBloc的实例，并且，只有Provider节点下面的子节点可以获取到这个FooBloc的实例。

jorum中的Provider组件是基于React的Context API的。

获取这个BLoC的实例

在子组件中，使用useBlochook可以获取到外层提供的FooBloc的实例：

export const ShowFoo: FC = () => {
  const fooBloc = useBloc(FooBloc)
  return (
    <div>
      {fooBloc ? 'foo' : ''}
    </div>
  )
}

看起来不像是一个正常的React组件？这是React的新特性：Hooks

订阅BLoC中的数据

BLoC中的数据是Observable，我们并不能像下面这样直接渲染到页面上：

return (
  <div>
    {fooBloc.data$}
    {/*↑这样写并不能拿到data的值*/}
  </div>
)

因此，我们需要使用jorum提供的另一个hook：useStream

export const ShowFoo: FC = suspense(() => {
  const fooBloc = useBloc(FooBloc)
  const data = useStream(fooBloc.data$)
  checkStream()
  return (
    <div>
      {data}
    </div>
  )
})

当fooBloc.data$更新时，ShowFoo会被通知并重新渲染。

不同于典型的响应式框架，在jorum中，我们对数据的订阅是显式的。

由于useStream是异步加载数据的，所以需要用suspense对组件进行加工。

不止于此

上面只是一个最简单的样例，jorum还有更多高级和有趣的概念和用法，请移步“概念”章节。