# 快速上手

## 安装

首先，请确保jorum和RxJS已经被正确的安装，并且相关的环境配置已经完成。这部分的操作在[这里](https://jorum.gitbook.io/jorum/installation)有所介绍。

## 定义BLoC

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

听起来很高深？

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

```typescript
import {bloc} from 'jorum'

@bloc
export class FooBloc {

}
```

## 往BLoC中添加数据

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

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

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

> 这里的“数据”都是[RxJS](https://rxjs-dev.firebaseapp.com/)中的Observable，在这篇文档中，我们假设你已经对RxJS有所了解。

## 在组件中提供BLoC

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

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

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

> jorum中的Provider组件是基于React的[Context API](https://reactjs.org/docs/context.html)的。

## 获取这个BLoC的实例

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

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

> 看起来不像是一个正常的React组件？这是React的新特性：[Hooks](https://reactjs.org/docs/hooks-intro.html)

## 订阅BLoC中的数据

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

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

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

```jsx
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还有更多高级和有趣的概念和用法，请移步“概念”章节。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jorum.gitbook.io/jorum/quick-start.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.