react-simple-global-state-store-hook

https://github.com/masx200/react-simple-global-state-store-hook

基于react hooksEventTarget 实现的极简全局状态管理 库

,可以跨组件共享全局状态,拥有高性能

就像使用 useState 一样使用全局状态,非常简洁

使用简单,可能是使用方法最简单的全局状态管理工具!

使用步骤只有两步,初始化全局状态,组件状态与全局状态双向绑定

跟其他全局状态管理工具相比,使用这个库对于原有的代码不需要太多的修改

只管理状态仓库,修改全局状态的方法返回给组件内部调用,

就跟使用useState一样简单!

希望世上再无 难用的全局状态管理

跟 redux 对比,极为简洁!抛弃 redux!

基于 react hooksEventTarget 实现

可以在任何组件中使用全局状态,所有组件最外层不需要包裹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

用法

import {
  changeState,
  useGlobalStore,
  initGlobalState,
  getGlobalStates
} from "@masx200/react-simple-global-state-store-hook";

函数changeState用来改变全局状态,并且通知所有订阅状态的组件更新状态

第一个参数是全局状态名,第二个参数是更新的状态值,或者函数返回新状态值

函数getGlobalStates用来读取全局状态

函数initGlobalState用来生成状态初始值,可以多次使用

参数为一个object,键名为全局状态名,键值为全局状态初始值

函数useGlobalStore用来订阅全局状态,组件状态与全局状态双向绑定

第一个参数为一个string, 为全局状态名

返回值是个Array,返回一个有状态值,以及一个更新它的函数

API

declare type Dispatch = (value: any) => void;
declare function useGlobalStore(name: string): [any, Dispatch];
declare function changeState(keyname: string, newvalue: any): void;
declare function getGlobalStates(): {
  [key: string]: any;
};
declare function initGlobalState(jsonobject: {
  [key: string]: any;
}): {
  [key: string]: any;
};

基础语法

只能在 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 中的 useStateuseEffect

使用了通过在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中使用需要添加 EventTargetpolyfillEvent 构造函数 polyfill

https://github.com/mysticatea/event-target-shim

https://github.com/masx200/webpack-react-vue-spa-awesome-config/blob/master/polyfill/dist/polyfill.min.js