HooX_一个基于 hook 的轻量级的 React 状态管理工具

Web前端开发网

fly63.com

HooX

GitHub:https://github.com/wuomzfx/hoox

描述信息:一个基于 hook 的轻量级的 React 状态管理工具

GitHub

HooX 是一个基于 hook 的轻量级的 React 状态管理工具。使用它可方便的管理 React 应用的全局状态，概念简单，完美支持 TS。HooX提供了函数式组件下的状态管理方案，以及完全基于函数式写法的一系列 API，让用户更加的拥抱函数式组件，走向未来更进一步。

HooX的实现非常简单，去除一些类型推导，约 100 行代码，完全基于 Context + Provider ，无任何黑科技，纯 react 原生机制与能力。

安装

npm install hooxjs -S

创建一个 Store

// counterStore.js
import createHoox from 'hooxjs'

const state = {
  count: 1
}

export const { getHoox, useHoox, createContainer } = createHoox(state)

// 创建一个action
export const up = () => {
  const [hooxState, setHoox] = getHoox()
  return setHoox({
    count: hooxState.count + 1
  })
}

// 创建一个computed数据
export const useDoubleCount = () => {
  const [hooxState] = useHoox()
  return hooxState.count * 2
}

使用 Store

import React from 'react'
import ReactDom from 'react-dom'
import { useHoox, useDoubleCount, up } from './counterStore'

function Child() {
  const doubleCount = useDoubleCount()
  return <div>{doubleCount}</div>
}

function Counter() {
  const [hooxState] = useHoox()
  return (
    <div>
      <div>{hooxState.count}</div>
      <div onClick={() => up()} />
      <Child />
    </div>
  )
}

const Container = createContainer(Counter)

ReactDom.render(<Container />, document.getElementById('#root'))

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/2933