使用react hooks实现的简单全局状态管理
使用react hooks实现的简单全局状态管理 react-simple-global-state-store-hook 仅仅使用44行代码写成的极简react全局状态管理库
React 其它杂项
共16Star
详细介绍
注意,此代码存储库已被弃用,不会再更新维护了.
Note that this code repository has been deprecated and will not be updated and maintained.
react-simple-global-state-store-hook
https://github.com/masx200/react-simple-global-state-store-hook
基于react hooks 和EventTarget 实现的极简全局状态管理 库
，可以跨组件共享全局状态，拥有高性能
就像使用 useState 一样使用全局状态,非常简洁
使用简单,可能是使用方法最简单的全局状态管理工具！
使用步骤只有两步，初始化全局状态，组件状态与全局状态双向绑定
跟其他全局状态管理工具相比，使用这个库对于原有的代码不需要太多的修改
只管理状态仓库,修改全局状态的方法返回给组件内部调用,
就跟使用useState一样简单!
希望世上再无 难用的全局状态管理
跟 redux 对比,极为简洁!抛弃 redux！
基于 react hooks和EventTarget 实现
可以在任何组件中使用全局状态，所有组件最外层不需要包裹context.provider
redux主要由store,action,reducer等等组成,过于庞大负杂,繁琐,组件太多无用的刷新，性能低下
组件状态与全局状态双向绑定
组件状态改变时全局状态改变
全局状态改变时组件状态改变
高性能 ，减少无用的组件刷新
不使用 React.createContext
不使用context刷新组件，而是使用setstate只刷新单个组件
如果使用context会导致大量组件的无用刷新
仅仅使用 几十 行代码写成的极简 react 全局状态管理库!
演示网址
https://masx200.github.io/index.html#/react-simple-global-state-store-hook
局部安装
cnpm install --save https://github.com/masx200/react-simple-global-state-store-hook.git
或者
yarn add https://github.com/masx200/react-simple-global-state-store-hook.git
用法
API
https://github.com/masx200/react-simple-global-state-store-hook/blob/master/dist/index.d.ts
import {
changeState,
useGlobalStore,
initGlobalState,
getGlobalStates,
} from "@masx200/react-simple-global-state-store-hook";
函数changeState用来改变全局状态,并且通知所有订阅状态的组件更新状态
第一个参数是全局状态名,第二个参数是更新的状态值,或者函数返回新状态值
函数getGlobalStates用来读取全局状态中的某一个值
函数initGlobalState用来生成状态初始值，可以多次使用
参数为一个object，键名为全局状态名，键值为全局状态初始值
函数useGlobalStore用来订阅全局状态，组件状态与全局状态双向绑定
第一个参数为一个string， 为全局状态名
返回值是个Array,返回一个有状态值，以及一个更新它的函数
基础语法
只能在 react 的函数式组件中使用!
以下示例使用了es6的解构赋值方法
就跟使用useState一样简单!
import React, { useState } from "react";
const [count, setCount] = useState(0);
使用react-simple-global-state-store-hook
import {
useGlobalStore,
initGlobalState,
} from "@masx200/react-simple-global-state-store-hook";
initGlobalState({
testnumber: "初始值数字",
全局状态testname: "初始值名字",
});
function component() {
const [count, setCount] = useGlobalStore("全局状态testname");
return <div>{count}</div>;
}
例如
要生成全局状态 testnumber ,初始值为 88888785461111111
import {
changeState,
useGlobalStore,
initGlobalState,
} from "@masx200/react-simple-global-state-store-hook";
initGlobalState({
testnumber: 88,
});
//全局状态 testnumber 生成 ,初始值为 88
import React from "react";
function increment() {
changeState("testnumber", (a) => a + 1);
}
function random() {
changeState("testnumber", Math.random());
}
function Htest() {
const [number, setnumber] = useGlobalStore("testnumber");
//全局状态 testnumber 已经 生成 ,不会重复生成初始值
return (
<div>
<p
onClick={() => {
random();
}}
>
number:
{number}
</p>
<button
onClick={() => {
increment();
// setnumber(number + 1);
/*修改全局状态 testnumber,其他使用了全局状态number的组件也会刷新数据*/
}}
>
修改number
</button>
</div>
);
}
import { render } from "react-dom";
render(<Htest />, document.getElementById("root"));
为什么要写这个状态管理工具？
因为
现有的 redux，mobx，vuex 等等管理工具使用太过繁琐，
不喜欢那些使用特别麻烦的状态管理工具
这个状态管理工具可能是学习成本和使用成本最低的
状态双向绑定使用非常简单
原理介绍
使用事件发布者订阅者模式
内部使用了 react hooks 中的 useState 和 useEffect
使用了通过在EventTarget上触发事件和接收事件的方式，来通知组件刷新，一个事件触发对应多个事件监听
把事件名称设置为状态名称,确保了一个全局状态的改变只会刷新使用这个状态的变量,不刷新其他变量,减少性能损耗
给每个要全局状态管理的变量,设置事件状态名称监听器 ,接收到事件后,把变量新的值从内部变量reactsimpleglobalstatestore中取出,然后执行setstate,通知组件刷新
当有全局变量改变时,把变量新的值存入内部变量reactsimpleglobalstatestore中,触发事件状态名称,
如果多个组件使用同一个全局状态,则改变一个状态,这些组件就会同步数据,组件刷新
如果一个全局状态在多个组件中被多次初始化,则只有第一次初始化的值存在全局状态中
当组件被卸载时，清除事件监听器，防止内存泄漏
当组件挂载之后,会自动同步全局状态
由于事件监听函数是异步执行，所以组件状态刷新也是异步执行的
React
React 是一个用于构建用户界面的 JavaScript 库。
https://zh-hans.reactjs.org/tutorial/tutorial.html
React Hooks
Hook 是 React 16.8 中的新增功能。它们允许您在不编写类的情况下使用状态和其他 React 功能。
https://reactjs.org/docs/hooks-overview.html#state-hook
EventTarget
EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器
https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget
在 IE 浏览器和Edge中使用需要添加 EventTarget 的 polyfill 和 Event 构造函数 polyfill
