0ui 中文文档教程

Question

一组用于使用 React 构建 UI 的实用程序

Demo

v1.2.0

npm i 0ui

查看一切如何运行的示例在 example/src/index.js

UMD build

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

core lib

lib/core.js

Random utilities

Stupid pattern matching

中一起使用 更像是 switch 的简写/case

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

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

imtbl

纯 JavaScript 对象的不可变样式数据操作，请参阅 imtbl 库。

State

lib/state.js

State object

独立状态对象

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

Derived state

lib/derived-state.js

导出状态 -> state' 具有一个函数并从 state 传播更新 -> state'

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

Multimethod

lib/multimethod.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"]}

UI

lib/ui.js

React 组件 API 包装器。 订阅多个状态对象。

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>
    );
  }
});