国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

eternalshallow / 1937人閱讀

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

倉庫：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%。

那，為什么又更新了？

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 = () => (
  

    {s => 
{s.foo}
}
    
  

);

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

使用 的 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 = () => (
  

    {s => 
Foo:{s.foo}
}
    {Bars(bar => 
Bar:{bar}
)}
    
    
  

);

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

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

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

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

更新的時候也能有提示

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97040.html

相關文章

  • 我厭倦了 Redux，那就造個輪子 Rectx：第三集

    摘要：呵呵，你沒想到吧，這玩意兒竟然有第三集我靠，我自己都沒想到，讓我們悄悄的回顧一下前兩集完全沒想到，竟然會有第二集我厭倦了，那就造個輪子第二集痛點分析第一集在這里我厭倦了，那就造個輪子算了，我都懶得寫了，自己看吧，當然不看也無所謂，正式開始。 倉庫：215566435/rectx 前言 麻煩快去我的倉庫里面噴： 老子學不動了，求不要更新。 呵呵，你沒想到吧，這玩意兒竟然有第三集！我靠，我...

    adam1q84 評論0 收藏0

  • 用Vue自己造個組件輪子，以及實踐背后帶來的思考

    摘要：用造個組件輪子吧閏土大叔如果你掌握了的組件知識，相關的指令事件，花點時間你也可以造出這么個入門級的小輪子。接下來，拋出造輪子實踐背后帶來的一些思考。以上三部分內容構成了的整個執行過程。 showImg(https://segmentfault.com/img/bV1Tnu?w=754&h=500); 前言 首先，向大家說聲抱歉。由于之前的井底之蛙，誤認為Vue.js還遠沒有覆蓋到二三線...

    icyfire 評論0 收藏0

  • 「造個輪子」——cicada 設計一個配置模塊

    摘要：同時也新增了一個。將不同的配置文件用不同的對象進行管理。由于需要支持多個配置文件，所有需要定義一個抽象類供所有的配置管理實現。其實就是一個結構的緩存，用于存放所有的配置?？偨Y這就是本次中的升級內容，包含了配置支持以及代碼重構。 showImg(https://segmentfault.com/img/remote/1460000016392132?w=2048&h=1365); 前言 ...

    fsmStudy 評論0 收藏0

  • 造個輪子,我學到了什么

    摘要：閱讀原文造個輪子我學到了什么聽說的最多的是不是不要重復的造輪子不要被這句話蒙騙了，這句話應該還沒說完整，在什么情況下不要造輪子實際項目中由于工期和質量原因，肯定不希望你造輪子，你造輪子花費時間且質量不如現有的輪子。 閱讀原文：造個輪子,我學到了什么 聽說的最多的是不是不要重復的造輪子？不要被這句話蒙騙了，這句話應該還沒說完整，在什么情況下不要造輪子?實際項目中由于工期和質量原因，肯定不...

    Acceml 評論0 收藏0

  • 簡潔的 React 狀態管理庫 - Stamen

    摘要：說到狀態管理，必提的肯定是與，年快過去了，它們依然是最火熱的狀態管理工具，也有一些基于的，如等，也有新的，如，這里不對各個解決方案作評價。 showImg(https://segmentfault.com/img/bVbhI3j?w=670&h=551); 說到 React 狀態管理，必提的肯定是 Redux 與 MobX，2018 年快過去了，它們依然是最火熱的狀態管理工具，也有一些...

    MyFaith 評論0 收藏0

發表評論

0條評論

eternalshallow

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<