Skip to content

Latest commit

 

History

History
133 lines (97 loc) · 3.14 KB

README-cn.md

File metadata and controls

133 lines (97 loc) · 3.14 KB

English | 简体中文

mook

简单易懂,无样本代码,无多余渲染,轻松共享React全局状态。

安装

yarn add @acte/mook
#
npm install --save @acte/mook

快速上手

创建一对hook函数

自定义一个 custom Hook,经 createHooks 包装转换后,会定义一个全局状态,返回一对 hook 函数:一个真身,一个替身。

import { createHooks } from "mook";
import { useState } from "react";

function useCounter(initialValue) {
  const [count, setCount] = useState(initialValue ?? 0);
  const decrement = () => setCount(count - 1);
  const increment = () => { setCount(count + 1);}
  return {
    count,
    decrement,
    increment
  };
}

export const {wrapped : useCounterModel, standin : useRefCounterModelRef} = createHooks(useCounter);

wrapped 是对传入的hook函数的包装,它可以获取数据,更新数据,发送通知。

standin 是hook函数的替身,它的返回值是对wrapped函数返回值的引用。

使用返回的hook函数

真身函数只能出现一次,替身函数可在多处使用

import {useCounterModel, useRefCounterModel } from "./couter-model";

function App(props) {
  return (
    <div style={{textAlign:"center"}}>
      <Component1 />
      <Component2 />
      <Component3 />
    </div>
  )
}

function Component1(props) {
  const {count, increment, decrement} = useCounterModel(10);
  return (
    <p>
      Component 1: {count}   <button onClick={increment}>Increment</button> <button onClick={decrement}>decrement</button>
    </p>
  );
}

function Component2(props) {
  const {count, increment, decrement} = useRefCounterModel();
  return (
      <p>
        Component 2: {count}  <button onClick={increment}>Increment</button> <button onClick={decrement}>decrement</button>
      </p>
  );
}

function Component3(props) {
  const {count, increment, decrement} = useRefCounterModel();
  return (
      <p>
        Component 3: {count}  <button onClick={increment}>Increment</button> <button onClick={decrement}>decrement</button>
      </p>
  );
}

API

createHooks

declare function createHooks<T, P>(hook: HookFunc<T, P>): WrappedHooks<T> 

创建一对 hook。参数是一个 custom Hook ,用于定义 model 的内部逻辑。

多次调用,会创建多对hook, 彼此相互隔离

const {wrapped: useCounterModelA, standin:useRefCounterModelA} = createHooks(useCounter);
const {wrapped: useCounterModelB, standin:useRefCounterModelB} = createHooks(useCounter);

WrappedHooks

export interface WrappedHooks<T> {
  wrapped : HookFunc<T>;
  standin : StandInHook<T>;
}

wrapped

wrapped 是对传入的hook函数的包装,它可以获取数据,更新数据,发送通知。

standin

standin 是hook函数的替身,它的返回值是对wrapped函数返回值的引用。

type Deps<T> = (model: T) => unknown[];
export type StandInHook<T> = (depsFn?: Deps<T>) => T;

standin 支持传入一个 depsFn 函数,来精确控制订阅的字段:

const counter = useRefCounterModel(model => [model.count, model.x.y]);