# 0ui 中文文档

规范地址：https://npmcn.com/package/0ui/

版本：1\.2\.0
npm 元数据更新时间：2025-05-19T19:04:20.197Z
中文译文更新时间：2026-10-31T14:04:17.900Z
软件包许可：MIT

本文由上游 README 机器翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/0ui
原文对照：https://npmcn.com/package/0ui/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：23.3 kB，17 个文件
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2018-03-25T22:24:10.479Z
- 最新版本发布：2018-03-26T16:12:47.468Z
- 已发布版本数：3（近 12 个月 0 个）

## 中文简介

一组用于用React构建ui的实用程序

## 安装

```sh
npm install 0ui
```

也可以使用：`pnpm add 0ui`、`yarn add 0ui`、`bun add 0ui`

## README

_一组用于用React构建ui的实用程序_

[演示](https://jsfiddle.net/qrtzgju2/5/)

v1.2.0

```
npm i 0ui
```

查看如何将所有东西一起使用的示例 `example/src/index.js`

## 构建UMD格式

```html
<script src="https://unpkg.com/0ui/dist/0ui.umd.js"></script>
```

## 核心自由

`lib/core.js`

_随机工具_

### 愚蠢的模式匹配

_更像是一个简写 `switch/case`_

```js
import { match } from "0ui/lib/core";

match("loading")({
  loading: () => console.log("Loading"),
  error: () => console.log("Error")
});
// "Error"
```

## imtbl

纯JavaScript对象的不可变样式数据操作，参见 [imtbl](https://github.com/roman01la/imtbl) 自由。

## 状态

`lib/state.js`

### 状态对象

_独立状态对象_

```js
import State from "0ui/lib/state";

const state = State.create(0);

state.addWatch("key", (key, state, prevVal, nextVal) => {
  console.log(prevVal, nextVal);
});

state.swap(val => val + 1); // 0 1
```

## 派生的状态

`lib/derived-state.js`

_使用函数派生state ->状态，并从state ->状态传播更新。_

```js
import State from "0ui/lib/state";
import DerivedState from "0ui/lib/derived-state";

const bucket = State.create({
  items: [
    {
      price: 104.5
    },
    {
      price: 78.2
    }
  ]
});

const bucketPrice = DerivedState.create(bucket, ({ items }) =>
  items.reduce((sum, { price }) => sum + price, 0)
);

bucketPrice.state; // 182.7

bucket.swap(removeFirstItem);

bucketPrice.state; // 178.2
```

## 多重方法

`lib/multimethod.js`

> 多分派或多方法是一些编程语言的特性，其中可以根据运行时（动态）类型动态分派函数或方法，或者在更一般的情况下，根据其多个参数的其他属性动态分派函数或方法。 [维基百科](https://en.wikipedia.org/wiki/Multiple_dispatch)

```js
import MultiMethod from "0ui/lib/multimethod";

const toJSON = MultiMethod.create(v => {
  if (Array.isArray(v)) {
    return "array";
  } else {
    return typeof v;
  }
});

toJSON.addMethod("string", v => JSON.stringify(v));

toJSON.addMethod("number", v => v.toString());

toJSON.addMethod("array", arr => {
  const jsonArr = arr.map(v => toJSON.dispatch(v)).join(", ");
  return `[${jsonArr}]`;
});

toJSON.addMethod("object", o => {
  const jsonObj = Object.entries(o)
    .map(([k, v]) => toJSON.dispatch(k) + ":" + toJSON.dispatch(v))
    .join(", ");
  return `{${jsonObj}}`;
});

toJSON.dispatch({
  items: [1, "two"]
});
// {"items":[1, "two"]}
```

## 用户界面

`lib/ui.js`

_React组件API包装器。订阅多个State对象。_

```js
import { createComponent } from "0ui/lib/ui";
import State from "0ui/lib/state";

const Counter = createComponent({
  states: {
    count: State.create(0) // local state
  },
  render(states, props) {
    const { count } = states;

    return (
      <div>
        <button onClick={() => count.swap(v => v - 1)}>-</button>
        <span>{count.state}</span>
        <button onClick={() => count.swap(v => v + 1)}>+</button>
      </div>
    );
  }
});
```

## 常见问题

### 0ui 是什么？

一组用于用React构建ui的实用程序

### 如何安装 0ui？

在项目目录运行 npm install 0ui，或使用 pnpm add / yarn add / bun add。

### 0ui 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/0ui 是否存在。

### 0ui 可以商用吗？

0ui 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### 0ui 还在维护吗？

最新版本 1\.2\.0 发布于 2018/03/27（8 年前）；至今共发布 3 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/03/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。