简洁的 React 状态管理库 - Stamen
说到 React 状态管理,必提的肯定是 Redux 与 MobX,2018 年快过去了,它们依然是最火热的状态管理工具,也有一些基于 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree,这里不对各个解决方案作评价。
但还是想吐槽:
什么 provider, connections, actions, reducers, effects, dispatch, put, call, payload, @observable, @computed, @observer, @inject...
一堆模板代码、各种概念、什么哲学原则... 还有各种多如牛毛的 Api。
我只是想早点码完页面下班,早点下班健身、陪妹子...
所以,我想要这样的一个状态管理库:
- 轻量 个人做移动端开发比较多
- 简洁 没模板代码, 尽量少的 Api
- 符合直觉 没复杂的概念, 给个 action 改 state 就好
- 清晰 更易写出可维护和可读性好的代码
- 高效 更高的开发效率,这很重要
- Typescript state 和 action 高度支持智能提示
我是个实用主义者,开发效率、代码可维护性和可读性、开发体验大于各种什么范式、各种理论,也不需要装纯,重要的是可以快速处理业务,产生价值,早点下班打王者。
有一天,我看到了 mobx 作者的 immer, 我感觉使用 immer, 可以实现一个我理想中的状态管理工具,所以就造了一个轮子,叫 stamen, 他有什么特点呢,Show you the code: stamen。
如果有什么核心特点的话,那应该是 "简洁",这里指的是使用者写代码时简洁,可以专注于业务,而不是自身源代码简洁,把问题留给使用者。
CodeSandbox上的例子: Basic | Async
用法比较简单:
import React from 'react';
import { render } from 'react-dom';
import { createStore } from 'stamen';const { consume, mutate } = createStore({ count: 1 });const App = () => (<div><span>{consume(state => state.count)}</span><button onClick={() => mutate(state => state.count--)}>-</button><button onClick={() => mutate(state => state.count++)}>+</button></div>
);render(<App />, document.getElementById('root'));
只有 state 和 action ,没有其它概念,只有一个 api:
const { consume, mutate } = createStore({ count: 1 });
Stamen
代码实现只有40行,对于大部分项目来说,这40行代码所包含的功能已然足够。
更多用法可以看:
Github: https://github.com/forsigner/...
文档: http://forsigner.com/stamen-z...
简洁的 React 状态管理库 - Stamen相关推荐
- React 状态管理库: Mobx
React 是一个专注于视图层的库.React 维护了状态到视图的映射关系,开发者只需关心状态即可,由 React 来操控视图. 在小型应用中,单独使用 React 是没什么问题的.但在复杂应用中,容 ...
- 教你写一个 React 状态管理库
自从 React Hooks 推行后,Redux 作为状态管理方案就显得格格不入了.Dan Abramov 很早就提到过 "You might not need Redux",开发 ...
- Recoil 是 React 的状态管理库
Recoil 是 React 的状态管理库,因此你需要将 Recoil 安装到 React 项目中才能使用.创建 React 项目最方便且推荐的方式是使用 Create React App: npx ...
- [译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...
- 一文带你全面体验八种状态管理库
动手点关注 干货不迷路 写在前面 状态管理库伴随着数据驱动类框架诞生以来,一直都是个带争议的话题,社区里关于这个方向的讨论文章也是数不胜数,本文写作的目的并不是去详细解答每一款状态库的设计原理和最佳实 ...
- 给前端快速上手摸鱼一把主流状态管理库,这家伙真香
前言 大家好,我是虚竹. 众所周知,React是一个专注于UI层的库,不同于Vue.Angular等框架,React 的各种状态管理方案一直是在百花齐放.群魔乱舞.除了热门库Redux.Mobx.Re ...
- 灵魂拷问:我们该如何写一个适合自己的状态管理库?
作者|李骏(涅尘) 来源|尔达Erda公众号 引言 大家好,这里是 Erda 开源项目前端技术团队,今天聊一聊前端的状态管理. 说到状态管理库,想必前端同学随口都能说出好几个来,社区里的轮子一个接 ...
- 解决react状态管理---React Query
什么是React Query react-query是一个适用于react hooks的请求库,它可以为任何类型的异步数据提供React状态管理功能,使React中的获取.缓存.同步和更新服务器数据变 ...
- 记前端状态管理库Akita中的一个坑
记状态管理库Akita中的一个坑 Akita是什么 Akita是一种基于RxJS的状态管理模式,它采用Flux中的多个数据存储和Redux中的不可变更新的思想,以及流数据的概念,来创建可观察的数据存储 ...
最新文章
- 计算机科学与技术专业认证研讨,信息学院召开计算机科学与技术专业IEET认证暨人才培养方案修订研讨会...
- mysql 5.5 declare_MySQL5新语句declare的用法
- Java NIO:IO与NIO的区别
- ExoPlayer简单使用
- 深入掌握JMS(六):消息头
- avframe转byte数组_C# amp; VB6.0 图像与二维数组 互转
- 数据仓库介绍与实时数仓案例
- 内存分配(malloc()和free())
- sqlalchemy mysql教程_SQLAlchemy 教程 —— 基础入门篇
- 每天进步一点点 2016-10-28
- 网上打开与关闭gps几种方案测试,其中方案3可行
- mysql常用客户端工具
- GD32 startup.s
- 【STM32F429的DSP教程】第13章 DSP快速计算函数-三角函数和平方根
- 智慧校园中教务管理系统功能需求思路设计分享来自博奥智源
- 解析迅捷产品的八大特点
- 2019电商生意经(三):内容化,跨界与反击
- ESP8266+水墨屏
- 子网掩码和prefixlength
- 采访ClickHouse 布道者郭炜
热门文章
- Desktop Goose for Mac抖音桌面宠物鸭
- python基础学习task09
- 达梦安装报错 could not load SWT library. Reasons:no swt…....No such file or directory
- Oracle EBS AP预付款发票核销可用金额查询SQL
- 【Godot】节点的碰撞与碰撞掩码的计算
- Ubuntu 11.10 Linux 3D桌面完全教程,显卡驱动安装方法,compiz特效介绍,常见问题解答
- linux双显卡配置_Linux系统怎么配置双显卡
- 移动echarts地图省份名称的位置
- 官宣!CSDN“2019 优秀 AI、IoT 应用案例 TOP 30+”重磅发布!
- java习题8,java试题练习题(第8套