我厌倦了 Redux,那就造个轮子 Rectx:第三集
前言
麻烦快去我的仓库里面喷:
老子学不动了,求不要更新。
呵呵,你没想到吧,这玩意儿竟然有第三集!我靠,我自己都没想到,让我们悄悄的回顾一下前两集
完全没想到,竟然会有第二集!
算了,我都懒得写了,自己看吧,当然不看也无所谓,正式开始。
新的 Rectx 有什么不同?
a light-weight state manager with mutable api.
有人就说了,你说 light-weight
就 来喂
??那是肯定是,这个库大小只有几 k 。其次,新版的 Rectx
并不依赖 React.context
,因此可以在任何 react
版本中使用。
当然,短短60行核心代码,我写了不少的测试,覆盖率也来到了98%。
那,为什么又更新了?
Redux
和Mobx
都非常的棒,但对于大部分项目都只是CRUD
的项目来说,这些个玩意儿都略显太重了。
而且对于react
的 immutable
哲学而言,实在是模版代码相当的多,对新手、高手、熟练工都不是很友好:新手觉得复杂,高手觉得烦躁,熟练工觉得不够快。
再加上,react
函数式编程以及 DOM-diff
依赖的是html tag
的缘故,因此我们需要手动优化 React
的性能,臭名昭著的shouldComponentUpdate
由此而来。
为了更好的解决上述的一些问题,我开始寻找一种方式能够解决:
模版化很少
- 无需手动
shouldComponentUpdate
- API 极少,学习成本低
mutable API
- 以下就是我的解决方案。
特点
rectx
有着强大的功能,他不仅能提供一个状态库,甚至能提供一个良好的类型辅助系统,这也意味着你可以在 TypeScript
中支持它!
- 并不依赖
react.context
api,支持 15、16 版本的 react mutable api
,再也不用写模版代码- 完整的测试,测试覆盖率极高
typescript
的d.ts
支持,非常友好的类型提示- 不用写
shouldComponentUpdate
的组件Auto
(自动) - 高性能,轻量
最简单的使用
当然了,这个例子如果你看就懂,那我非常建议你直接去看我是如何处理,使得不需要写shouldComponentUpdate
的code sandbox 例子:
import React from 'react';
import {render} from 'react-dom';
import {init} from 'rectx';
const {Put, Ctx} = init({foo: 1});
const App = () => (
<div>
<Ctx>{s => <div>{s.foo}</div>}</Ctx>
<button onClick={() => Put(s => (s.foo = s.foo + 1))}>add</button>
</div>
);
render(<App />, document.getElementById('root'));
使用 <Ctx/>
的 renderProps
的形式,就能拿出我们想要的数据.
值得注意的是,Put(s => (s.foo = s.foo + 1))
在这里,我们直接修改了我们的数值,当数据非常复杂的时候,这种操作方式尤为珍贵。
无需 shouldComponentUpdate
的组件 Auto
import { init } from "rectx";
const { Put, Ctx, Auto } = init({ foo: 1, bar: 1 });
首先我们依然是引入我们的组件,Put
用于更新,Ctx
用于获取,那么 Auto
是一个什么鬼?
Auto
是一个选择器,他能够分离我们的 Store
,把每一个 Store
切分成一个小粒度的块,使得我们的代码更加简洁。比如我们想获取全局状态 store
中的,bar
,我们就可以:
const Bars = Auto(s => s.bar);
当我们使用Bars
的时候,我们获取到的就是 bar
这个属性了。当然,Auto
翻译为自动,这是他第一个自动的地方,第二个特点请看下面:
import React from "react";
import { render } from "react-dom";
import { init } from "rectx";
const { Put, Ctx, Auto } = init({ foo: 1, bar: 1 });
const Bars = Auto(s => s.bar);
const App = () => (
<div>
<Ctx>{s => <div>Foo:{s.foo}</div>}</Ctx>
{Bars(bar => <div>Bar:{bar}</div>)}
<button onClick={() => Put(s => (s.foo = s.foo + 1))}>change Foo</button>
<button onClick={() => Put(s => (s.bar = s.bar + 1))}>change Bar</button>
</div>
);
render(<App />, document.getElementById("root"));
首先 Auto
是一个 selector
,其作用是获取全局的状态,从中选出 你关心的 属性,当这些属性被选择出来以后,只要这些属性没有被更新,那么他们所返回的组件 一定不会 更新。同时,外部的属性是否更新,跟他们同样没有任何关系。
熟悉 React
的同学,一定知道这么做的珍贵之处,再也不用手动书写 shouldComponentUpdate
了。
类型提示
得益于 typescript
,Rectx
得到了良好的类型提示。
render props
中会有提示
当我们初始化store
以后,我们的store
里面具体有什么值,在纯 js
中并没有智能提示,但加入了 ts
之后,一切会大不一样
更新的时候也能有提示
最后,请不要吝啬你的星星,仓库:仓库:215566435/rectx
我厌倦了 Redux,那就造个轮子 Rectx:第三集的更多相关文章
- 「造个轮子」——cicada 设计一个配置模块
前言 在前两次的 cicada 版本中其实还不支持读取配置文件,比如对端口.路由的配置. 因此我按照自己的想法创建了一个 issue ,也收集到了一些很不错的建议. 最终其实还是按照我之前的想法来做了 ...
- 「造个轮子」——cicada 源码分析
前言 两天前写了文章<「造个轮子」--cicada(轻量级 WEB 框架)> 向大家介绍了 cicada 之后收到很多反馈,也有许多不错的建议. 同时在 GitHub 也收获了 80 几颗 ...
- 造个轮子之基于 Netty 实现自己的 RPC 框架
原文地址: haifeiWu和他朋友们的博客 博客地址:www.hchstudio.cn 欢迎转载,转载请注明作者及出处,谢谢! 服务端开发都会或多或少的涉及到 RPC 的使用,当然如果止步于会用,对 ...
- 尝鲜刚发布的 SpringFox 3.0.0,以前造的轮子可以不用了...
最近 SpringFox 3.0.0 发布了,距离上一次大版本2.9.2足足有2年多时间了.可能看到这个名字,很多读者会有点陌生.但是,只要给大家看一下这两个依赖,你就知道了! <depende ...
- dva的effect那么难用,自己造一个轮子吧
背景 对于dva这个开发框架,国内从事react的前端工程师多半不会感到陌生,dva完善的开发体系和简单的api,让其被广泛运用到实际工作中.我所在的公司也是长期使用dva作为基础的开发框架,虽然好用 ...
- Asp.net Mvc 请求是如何到达 MvcHandler的——UrlRoutingModule、MvcRouteHandler分析,并造个轮子
这个是转载自:http://www.cnblogs.com/keyindex/archive/2012/08/11/2634005.html(那个比较容易忘记,希望博主不要生气的) 前言 本文假定读者 ...
- 「造个轮子」——cicada(轻量级 WEB 框架)
前言 俗话说 「不要重复造轮子」,关于是否有必要不再本次讨论范围. 创建这个项目的主要目的还是提升自己,看看和知名类开源项目的差距以及学习优秀的开源方式. 好了,现在着重来谈谈 cicada 这个项目 ...
- redux、immutablejs和mobx性能对比(三)
四.我的结论 通过第三部分的数据数据分析,我觉得我们可以得到以下结论: 无论是在开发环境还是测试环下页面的首次加载速度结果都是:redux>immutablejs>mobx,但是他们之间的 ...
- 用 rollup + gulp 造个轮子,别说还挺香
前戏 我是16年入了前端的坑,17年知道了gulp和rollup这两个玩意儿.由于那时webpack势头很猛,便一直没有正眼瞧过它一眼. 直到20年进了一家小公司,做了很多类似的小项目,相同的代码拷来 ...
随机推荐
- 路由器协议----IGP、EGP、RIP、OSPF、BGP、MPLS
1.路由控制的定义 <br>1.1.IP地址与路由控制 file:///var/folders/pz/cy11_lpd5rqfs66s778032580000gn/T/51.html ...
- TCP\IP协议簇-各层主要协议帧格式
本文只是对各协议的概要,详细请参考rfc文件. 官方下载地址:https://tools.ietf.org/rfc/index rfc中文:http://man.chinaunix.net/devel ...
- linux 上安装 java
一.源码安装 1.本地下载 java, 并上传到 linux 上 2.解压文件 tar -zxvf jdk-7u72-linux-i586.gz 3.配置环境变量 vi /etc/profile ...
- python学习笔记(24)-类与对象
#类与对象 #python类的语法 关键字 class #class 类名 类名的规范是:数字字母下划线组成,不能以数字开头 首字母大写 驼峰命名 #类属性 放在类里面的变量值 #类方法 放在类里面的 ...
- PostgreSQL中实现更新默认值(二)
今天我们用表继承+触发器的方案,来实现表中的更新默认值.这也许是PostgreSQL里最佳的解决方案. 一. 创建一张表,作为父表 create table basic_update( t_updat ...
- java5的静态导入import static
在Java 5中,import语句得到了增强,以便提供甚至更加强大的减少击键次数功能,虽然一些人争议说这是以可读性为代价的.这种新的特性成为静态导入. 1.静态导入的与普通import的区别: imp ...
- python学习笔记(3)数据类型-列表list
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...
- Qt LNK1158无法运行rc.exe解决办法
找出电脑上的rc.exe ,发现在C:\Program Files (x86)\Windows Kits\10\bin\10.0.xxxx.0\x86 路径下. 找出电脑上的rc.exe ,发现在C: ...
- python的collections模块和functools模块
collections是Python内建的一个集合模块,提供了许多有用的集合类. namedtuple 我们知道tuple可以表示不变集合,例如,一个点的二维坐标就可以表示成: >>> ...
- STM32 CAN 发送和接收 寄存器变化过程
发送: