我厭倦了 Redux，那就造個(gè)輪子 Rectx：第三集

eternalshallow 發(fā)布于2019-08-23 11:29 / 1946人閱讀

摘要：呵呵，你沒想到吧，這玩意兒竟然有第三集我靠，我自己都沒想到，讓我們悄悄的回顧一下前兩集完全沒想到，竟然會(huì)有第二集我厭倦了，那就造個(gè)輪子第二集痛點(diǎn)分析第一集在這里我厭倦了，那就造個(gè)輪子算了，我都懶得寫了，自己看吧，當(dāng)然不看也無所謂，正式開始。

倉庫：215566435/rectx

前言

麻煩快去我的倉庫里面噴：

老子學(xué)不動(dòng)了，求不要更新。

呵呵，你沒想到吧，這玩意兒竟然有第三集！我靠，我自己都沒想到，讓我們悄悄的回顧一下前兩集
完全沒想到，竟然會(huì)有第二集！

我厭倦了 Redux，那就造個(gè)輪子 Rectx 第二集: immutable 痛點(diǎn)分析第一集在這里：我厭倦了Redux，那就造個(gè)輪子：Rectx

算了，我都懶得寫了，自己看吧，當(dāng)然不看也無所謂，正式開始。

新的 Rectx 有什么不同？

a light-weight state manager with mutable api.

有人就說了，你說 light-weight 就來喂？？那是肯定是，這個(gè)庫大小只有幾 k 。其次，新版的 Rectx 并不依賴 React.context，因此可以在任何 react 版本中使用。

當(dāng)然，短短60行核心代碼，我寫了不少的測試，覆蓋率也來到了98%。

那，為什么又更新了？

Redux和Mobx都非常的棒，但對(duì)于大部分項(xiàng)目都只是CRUD的項(xiàng)目來說，這些個(gè)玩意兒都略顯太重了。

而且對(duì)于react的 immutable 哲學(xué)而言，實(shí)在是模版代碼相當(dāng)?shù)亩?，?duì)新手、高手、熟練工都不是很友好：新手覺得復(fù)雜，高手覺得煩躁，熟練工覺得不夠快。

再加上，react函數(shù)式編程以及 DOM-diff 依賴的是html tag的緣故，因此我們需要手動(dòng)優(yōu)化 React 的性能，臭名昭著的shouldComponentUpdate由此而來。

為了更好的解決上述的一些問題，我開始尋找一種方式能夠解決：
模版化很少

無需手動(dòng) shouldComponentUpdate

API 極少，學(xué)習(xí)成本低

mutable API

以下就是我的解決方案。

特點(diǎn)

rectx 有著強(qiáng)大的功能，他不僅能提供一個(gè)狀態(tài)庫，甚至能提供一個(gè)良好的類型輔助系統(tǒng)，這也意味著你可以在 TypeScript中支持它！

并不依賴 react.context api，支持 15、16 版本的 react

mutable api，再也不用寫模版代碼

完整的測試，測試覆蓋率極高

typescript 的 d.ts 支持，非常友好的類型提示

不用寫 shouldComponentUpdate 的組件 Auto（自動(dòng)）

高性能，輕量

最簡單的使用
當(dāng)然了，這個(gè)例子如果你看就懂，那我非常建議你直接去看我是如何處理，使得不需要寫shouldComponentUpdate的code sandbox 例子:

import React from "react";
import {render} from "react-dom";
import {init} from "rectx";

const {Put, Ctx} = init({foo: 1});

const App = () => (
  
    {s => {s.foo}
}
    
  
);

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

使用的 renderProps 的形式，就能拿出我們想要的數(shù)據(jù).

值得注意的是,Put(s => (s.foo = s.foo + 1))在這里，我們直接修改了我們的數(shù)值，當(dāng)數(shù)據(jù)非常復(fù)雜的時(shí)候，這種操作方式尤為珍貴。

無需 shouldComponentUpdate 的組件 Auto

code sandbox例子

import { init } from "rectx";

const { Put, Ctx, Auto } = init({ foo: 1, bar: 1 });

首先我們依然是引入我們的組件，Put 用于更新，Ctx 用于獲取，那么 Auto 是一個(gè)什么鬼？

Auto 是一個(gè)選擇器，他能夠分離我們的 Store ，把每一個(gè) Store 切分成一個(gè)小粒度的塊，使得我們的代碼更加簡潔。比如我們想獲取全局狀態(tài) store 中的，bar，我們就可以：

const Bars = Auto(s => s.bar);

當(dāng)我們使用Bars的時(shí)候，我們獲取到的就是 bar 這個(gè)屬性了。當(dāng)然，Auto翻譯為自動(dòng)，這是他第一個(gè)自動(dòng)的地方，第二個(gè)特點(diǎn)請看下面：

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 = () => (
  
    {s => Foo:{s.foo}
}
    {Bars(bar => Bar:{bar})}
    
    
  
);

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

首先 Auto 是一個(gè) selector，其作用是獲取全局的狀態(tài)，從中選出你關(guān)心的屬性，當(dāng)這些屬性被選擇出來以后，只要這些屬性沒有被更新，那么他們所返回的組件一定不會(huì) 更新。同時(shí)，外部的屬性是否更新，跟他們同樣沒有任何關(guān)系。
熟悉 React 的同學(xué)，一定知道這么做的珍貴之處，再也不用手動(dòng)書寫 shouldComponentUpdate 了。

類型提示
得益于 typescript，Rectx得到了良好的類型提示。

render props 中會(huì)有提示
當(dāng)我們初始化store以后，我們的store里面具體有什么值，在純 js 中并沒有智能提示，但加入了 ts 之后，一切會(huì)大不一樣

更新的時(shí)候也能有提示

最后，請不要吝嗇你的星星，倉庫：倉庫：215566435/rectx

GPU云服務(wù)器云服務(wù)器第三集我大四了我明白了我回來了

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97040.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

eternalshallow

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

如何提交百度新聞源?百度新聞源申請方法步驟

閱讀 1453·2021-09-28 09:44
程序員年紀(jì)大了以后都去了哪里

閱讀 2520·2021-09-28 09:36
NXP RT1064學(xué)習(xí)筆記（一）— 開發(fā)環(huán)境

閱讀 1190·2021-09-08 09:35
css總結(jié)

閱讀 1993·2019-08-29 13:50
如何使用Flexbox和CSS Grid，實(shí)現(xiàn)高效布局

閱讀 822·2019-08-29 13:29
史上前端面試最全問答（附答案）

閱讀 1142·2019-08-29 13:15
前端面試題2017（篇幅長，附答案）

閱讀 1735·2019-08-29 13:00
巧用命令行工具UCloud CLI，輕量操作API管理云資源

閱讀 3003·2019-08-26 16:16

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

我厭倦了 Redux，那就造個(gè)輪子 Rectx：第三集

相關(guān)文章