我厌倦了 Redux,那就造个轮子 Rectx:第三集

仓库:215566435/rectx

前言

麻烦快去我的仓库里面喷:

老子学不动了,求不要更新。

呵呵,你没想到吧,这玩意儿竟然有第三集!我靠,我自己都没想到,让我们悄悄的回顾一下前两集
完全没想到,竟然会有第二集!

我厌倦了 Redux,那就造个轮子 Rectx 第二集: immutable 痛点分析

第一集在这里:我厌倦了Redux,那就造个轮子:Rectx

算了,我都懒得写了,自己看吧,当然不看也无所谓,正式开始。

新的 Rectx 有什么不同?

a light-weight state manager with mutable api.

有人就说了,你说 light-weight来喂??那是肯定是,这个库大小只有几 k 。其次,新版的 Rectx 并不依赖 React.context,因此可以在任何 react 版本中使用。

当然,短短60行核心代码,我写了不少的测试,覆盖率也来到了98%。

那,为什么又更新了?

ReduxMobx都非常的棒,但对于大部分项目都只是CRUD的项目来说,这些个玩意儿都略显太重了。

而且对于reactimmutable 哲学而言,实在是模版代码相当的多,对新手、高手、熟练工都不是很友好:新手觉得复杂,高手觉得烦躁,熟练工觉得不够快。

再加上,react函数式编程以及 DOM-diff 依赖的是html tag的缘故,因此我们需要手动优化 React 的性能,臭名昭著的shouldComponentUpdate由此而来。

为了更好的解决上述的一些问题,我开始寻找一种方式能够解决:
模版化很少

  • 无需手动 shouldComponentUpdate
  • API 极少,学习成本低
  • mutable API
  • 以下就是我的解决方案。

特点

rectx 有着强大的功能,他不仅能提供一个状态库,甚至能提供一个良好的类型辅助系统,这也意味着你可以在 TypeScript中支持它!

  • 并不依赖 react.context api,支持 15、16 版本的 react
  • mutable api,再也不用写模版代码
  • 完整的测试,测试覆盖率极高
  • typescriptd.ts 支持,非常友好的类型提示
  • 不用写 shouldComponentUpdate 的组件 Auto(自动)
  • 高性能,轻量

最简单的使用
当然了,这个例子如果你看就懂,那我非常建议你直接去看我是如何处理,使得不需要写shouldComponentUpdatecode 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

code sandbox例子

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 了。

类型提示
得益于 typescriptRectx得到了良好的类型提示。

render props 中会有提示
当我们初始化store以后,我们的store里面具体有什么值,在纯 js 中并没有智能提示,但加入了 ts 之后,一切会大不一样

更新的时候也能有提示

最后,请不要吝啬你的星星,仓库:仓库:215566435/rectx

原文地址:https://www.cnblogs.com/baimeishaoxia/p/11854087.html

时间: 2024-11-05 11:48:26

我厌倦了 Redux,那就造个轮子 Rectx:第三集的相关文章

我为什么要造一个轮子——GNova开发小计

GNova最初叫做CSystem,是作为系统库来设计的. 我最初学习C++是在大学时期的专业课,学生时代也曾用C++写过一些算法,但项目和比赛一般是用C#和Java完成的.工作之后,由于项目需要,我们的业务平台需要使用C++进行编写.在当时,我总是认为C++的标准库SL不如Java的lang包和.Net的System库好用,再加上当时接触到了Qt的Core模块,以及项目合作单位自己的基础库封装,于是我渐渐萌生了编写一套属于自己的好用的基础库的想法,CSystem也就应运而生. 现在看来,当时的想

造新轮子啦,让pytesser支持3.x啦~

http://www.songluyi.com/%E9%80%A0%E6%96%B0%E8%BD%AE%E5%AD%90%E5%95%A6%EF%BC%8C%E8%AE%A9pytesser%E6%94%AF%E6%8C%813-x%E5%95%A6/ 0x00 前言 曾经用2.x版本的Python写过一个小小的验证码识别小程序,不到三十行,用的是pytesser 但是pytesser仅仅支持2.x版本,因此我们需要将这个轮子改写为3.x,方便我们调用. (等不及的小伙伴可以直接pip inst

硬造的轮子趟过的坑--浮点型转字符串函数

浮点型转字符串是最常见的一个功能了,对于弱类型语言来说更是几乎感觉不到.但现在问个问题?用C语言写一个浮点数转字符串的函数,有多难呢? 一开始写这个函数的时候是大二的时候,那时候在学C51单片机,用到1602显示屏,就是下图这货,通常遇到的情况就是要想要在屏幕上显示整数或者浮点数,1602封装的字库里面接口规范里接收的是字符串,所以在写程序时必须先把整数和浮点数转换成字符串.当时我就找到好像说 itoa , ftoa 这样的方法,但是那两个方法需要使用 stdlib.h 库,而Keil C51

Hybrid App Development: 二、关于造轮子以及在Xcode iOS应用开发中加入Cordova

转载请注明出处:http://www.cnblogs.com/xdxer/p/4111552.html [ctrl+左键点击图片可以查看原图] 在上一篇关于Hybrid App Development的文章中,我讨论了一下在iOS下UIWebView的使用方法.但是光使用一个UIWebView所提供的功能还是完全不能满足我们的需求.   关于造轮子的思考: 在UIKit中的UIWebView虽然已经提供了很多功能了,比如JavaScript和Objc之间的通信.但是考虑到一个问题,如果在Hybr

汉字的理据与造字取向

我们在其他讲里谈到汉字的理据问题,汉字的理据与造字取向直接相关,而造字取向与我们这里讲的"字义"是有一定联系的.对于一个具体的汉字而言,造字取向讲的是用怎样的方法造出该字,字义是据已有的字形通过字形分析得出一个意义.如"群鸟在木上也"."裁衣之始也"."手持隹失之也"分别是"集"."初"."夺"三字的造字取向.也就是说,"集"字是通过群鸟聚集于树上

【造轮子】MFC实现BlockingQueue

最近任务需要在MFC下做多线程生产者消费者模式的东西,我找了半天貌似MFC没有类似Java里面BlockingQueue那样的工具(也许是我手残没找到). 网上好像也有很多大佬去实现这个.但是我没仔细去找,看了看一些资料就想着造个轮子玩玩. 实现如下: 主要是利用CCriticalSection保护内置的std::list,然后用CEvent来实现生产者消费者的同步. 参考资料:http://stackoverflow.com/questions/6683356/c-templated-prod

程序员为什么热衷造轮子

搜索一下"造轮子"或者"程序员为什么喜欢造轮子",会看到很多相关的讨论,这是个老生常谈的话题,很多人谈过了,谈了很多年.不过还是有再谈的必要. "造轮子"的含义: 明知道你做的不可能比前辈做得更好,却仍然坚持要做. 就软件开发而言,"造轮子"是指,"业界已经有公认的软件或者库了,却还坚持要自己做". 在软件开发过程中,有时你想造轮子老板却极力反对,有时你不想造轮子老板却坚持要造一个出来,为什么会有这种两极状

程序员为什么热衷造轮子?

搜索一下“造轮子”或者“程序员为什么喜欢造轮子”,会看到很多相关的讨论,这是个老生常谈的话题,很多人谈过了,谈了很多年.不过还是有再谈的必要. “造轮子”的含义: 明知道你做的不可能比前辈做得更好,却仍然坚持要做. 就软件开发而言,“造轮子”是指,“业界已经有公认的软件或者库了,却还坚持要自己做”. 在软件开发过程中,有时你想造轮子老板却极力反对,有时你不想造轮子老板却坚持要造一个出来,为什么会有这种两极状况? 这篇文章就来讨论“造轮子”这件事,包括下列主题: 程序员为什么会重复造轮子 为什么有

快速学习C语言四: 造轮子,ArrayList

高级语言里的列表是最常用的数据结构,在C里造个轮子玩玩,C没有泛型,先用int练习. Collection的ADT一般有hasnext,next,add, remove操作,List一般还加了removeat, insert等,然后Stack有push和pop,Queue有enqueue和dequeue.列表有种实现, ArrayList和LinkedList,总体来说ArrayList更常用一些,就先用数组实现个列表. ArrayList在末尾的添加和删除还是挺快的(O(1)),所以当栈来用挺