moz

mozz

基于hooks的状态管理

Showing:

Popularity

Downloads/wk

8

GitHub Stars

36

Maintenance

Last Commit

2yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.2KB

License

ISC

Type Definitions

Tree-Shakeable

No?

Categories

Readme

mozz

本来想叫moz的,结果发布npm包的时候,发现mo a ~ z 都被占了 ~

基于react hooks实现的状态管理工具。

GitHub npm version npm downloads React

特性

  • 基于React hooks 实现,支持所有官方与自定义hooks
  • 超级轻量,核心代码只有十来行
  • 无侵入性,可单独使用,也可以与redux,mobx配合使用
  • 支持Typescript,可轻松获取返回的状态类型,无需额外定义声明
  • 使用简单,基本与hooks方式一致

安装

> yarn add mozz

使用

首先自定义一个hook,这个hooks没有任何特殊,与其他自定义hooks完全一样。

// useCounter.ts
import {useState} from "react";

export default function useCounter() {
  const [counter, setCounter] = useState(0);

  return {
    counter,
    decrease: () => setCounter(counter - 1),
    increase: () => setCounter(counter + 1)
  }
}

然后在父级组件中,引入mozz,以及刚才自定义好的hook。 利用api createStore得到特定的 Provider与hook函数useStore

import { createStore } from 'mozz';
import useCounter from './useCounter';

export const { Provider, useStore } = createStore(useCounter);

父级组件作为目标组件,需要被Provider包裹起来

export default () => <Provider><App /></Provider>;

在父级组件内部,可直接使用 useStore 获取自定义hook中,定义好的状态与方法。

const App: FC = () => {
  const { counter, decrease, increase } = useStore();
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <a className="App-link" href="/" rel="noopener noreferrer">
          Learn moz
        </a>

        <div>
          <p>{counter}</p>
          <button onClick={increase}>+</button>
          <button onClick={decrease}>-</button>
        </div>
        <Comp />
      </header>
    </div>
  );
};

子组件 Comp 中,也可以直接使用 useStore 获取状态与方法,他们被父子组件共享。

import React from 'react';
import {useStore} from './App';

export default function Comp() {
  const {increase} = useStore();

  return (
    <div>
      <p style={{ fontSize: '12px' }}>我是子组件,当我内部的点击事件执行时,能够影响到counter的值</p>
      <button onClick={increase}>sub +</button>
    </div>
  )
}

OK,没有啦,使用就跟useState一样简单。

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100