English | 简体中文

React Hook 状态管理器

• 支持全局与局部状态管理(局部状态管理退出即销毁)
• 使用自定义 Hook 定义 model
• render 优化(只有绑定的数据改变才会触发 render)
• 支持 全局 model 以及局部 model

在线预览

安装

yarn add rmox
# or
npm install --save rmox

使用手册

全局 model

配置 GlobalProvider

由于 rmox 全局 model 都是挂载在 App 之上所以需要配置 GlobalProvider 只有需要使用全局model的情况下才需要配置

import { StrictMode } from 'react'
import ReactDOM from 'react-dom'
import { GlobalProvider } from 'rmox'
import App from './App'
const rootElement = document.getElementById('root')
ReactDOM.render(
  <StrictMode>
    <GlobalProvider>
      <App />
    </GlobalProvider>
  </StrictMode>,
  rootElement,
)

创建 modelHook

通过createModel创建一个 modelHook ,第二个参数为 对应配置 global为是否为全局

const useUserModel = (age: number) => {
  const [age, setAge] = useState(age)
  const addAge = () => setAge(age => age + 1)
  return { addAge, age }
}
export default createModel(useUserModel, {
  global: true,
})

组件内使用 modelHook

在任何组件中直接调用 modelHook ，可以直接获取 model 内容。

import useUserModel from '../models/useUserModel'
const App = () => {
  const { age, addAge } = useUserModel()
  return (
    <>
      <button onClick={addAge}>+</button>
      {age}
    </>
  )
}

局部(模块) model

创建一个 modelHook

通过createModel创建一个 modelHook

import { useState } from 'react'
import { createModel } from 'rmox'
const useCounterModel = init => {
  const [count, setCount] = useState(init)
  const del = () => setCount(count - 1)
  const add = () => setCount(count + 1)
  return {
    count,
    add,
    del,
  }
}
export default createModel(useCounterModel)

由于 rmox 局部 model 需要一个挂载点,使用需要给局部块添加Provier

绑定模块

import React from "react";
import Counter from "./components/Counter";
import Count from "./components/Counter/count";
import useCounter from "./models/useCounter";
import useCounterModel from "./models/useCounterModel";

const App = () => {
  return (
    <div className="App" >
      <useCounterModel.Provider value={10}>
        <Counter />
        <Count />
      </useCounterModel.Provider>
    </div>
  );
}

export default App;
);

显示 model 内容

直接在需要使用modelHook内容的的位置使用useCounterModel订阅count被修改时会同步更新,只有modelHook内部中当前使用到的数据改变,才会触发当前组件render

import React from 'react'
import useCounterModel from '../../models/useCounterModel'
const Count = () => {
  const { count } = useCounterModel()
  return (
    <>
      <div>Count：{count}</div>
    </>
  )
}
export default Count

调用 model 方法

import React from 'react'
import useCounterModel from '../../models/useCounterModel'

const Counter = () => {
  const { del, add } = useCounterModel()
  return (
    <>
      <button onClick={add}>+</button>
      <button onClick={del}>-</button>
    </>
  )
}
export default Counter

在类组件中调用

支持用注解绑定(可以绑定多个也可以绑定一个)

@connect([useMoneyModel, useUserModel], ([money, user]) => ({
  age: user.age,
  money: money.money,
}))
export default class Test extends React.Component {
  render() {
    const { age, money } = this.props
    return (
      <>
        {money} / {age}
      </>
    )
  }
}

import React from 'react'
import useCounterModel from '../../models/useCounterModel'

const Counter = () => {
  const { del, add } = useCounterModel()
  return (
    <>
      <button onClick={add}>+</button>
      <button onClick={del}>-</button>
    </>
  )
}
export default Counter

更多用法

modelHook 依赖调用

rmox支持模块之间的相互依赖

import { useState } from 'react'
import { createModel } from 'rmox'
import useUserModel from './useUserModel'

const useMoneyModel = () => {
  const [money, setMoney] = useState(100)
  const { addAge } = useUserModel()
  const addMoney = () => setMoney(money => money + 1)
  return { addMoney, money, addAge }
}
export default createModel(useMoneyModel, {
  global: true,
})

在任意位置获取model内容以及修改store(仅支持全局 model)

在实际过程中可能在不是组件的环境中需要获取到modelHook内容,rmox给 model 对象上附带对应的属性犯法

import useUserModel from './useUserModel'
// model内容
const counterState = useUserModel.getData()
// 直接修改内容
useUserModel.getData()?.addAge()

注意

依赖必须为单向流,禁止循环嵌套,且全局与局部 model 之间不允许全局依赖局部model

API 介绍

createModel(创建 model)

| 参数 | 描述 | 默认 | 必填 | | ------- | ------------------ | ---- | ---- | | useHook | 具体的 modelHook | -- | 是 | | options | 配置 ·· global | | 否 |

GlobalProvider(全局提供者)

全局 model 必须配置到入口