注意,此代码存储库已被弃用,不会再更新维护了.

Note that this code repository has been deprecated and will not be updated and maintained.

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 全局状态管理库!

演示网址

局部安装

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

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

;

}

例如

要生成全局状态 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 (

);

}

import { render } from "react-dom";

render(, document.getElementById("root"));

为什么要写这个状态管理工具？

因为

现有的 redux，mobx，vuex 等等管理工具使用太过繁琐，

不喜欢那些使用特别麻烦的状态管理工具

这个状态管理工具可能是学习成本和使用成本最低的

状态双向绑定使用非常简单

原理介绍

使用事件发布者订阅者模式

内部使用了 react hooks 中的 useState 和 useEffect

使用了通过在EventTarget上触发事件和接收事件的方式，来通知组件刷新，一个事件触发对应多个事件监听

把事件名称设置为状态名称,确保了一个全局状态的改变只会刷新使用这个状态的变量,不刷新其他变量,减少性能损耗

给每个要全局状态管理的变量,设置事件状态名称监听器 ,接收到事件后,把变量新的值从内部变量reactsimpleglobalstatestore中取出,然后执行setstate,通知组件刷新

当有全局变量改变时,把变量新的值存入内部变量reactsimpleglobalstatestore中,触发事件状态名称,

如果多个组件使用同一个全局状态,则改变一个状态,这些组件就会同步数据,组件刷新

如果一个全局状态在多个组件中被多次初始化,则只有第一次初始化的值存在全局状态中

当组件被卸载时，清除事件监听器，防止内存泄漏

当组件挂载之后,会自动同步全局状态

由于事件监听函数是异步执行，所以组件状态刷新也是异步执行的

React

React 是一个用于构建用户界面的 JavaScript 库。

React Hooks

Hook 是 React 16.8 中的新增功能。它们允许您在不编写类的情况下使用状态和其他 React 功能。

EventTarget

EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器

在 IE 浏览器和Edge中使用需要添加 EventTarget 的 polyfill 和 Event 构造函数 polyfill