我厭倦了 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%。

那，爲何又更新了？

Redux和Mobx都很是的棒，但對於大部分項目都只是CRUD的項目來講，這些個玩意兒都略顯過重了。

並且對於react的 immutable 哲學而言，實在是模版代碼至關的多，對新手、高手、熟練工都不是很友好：新手以爲複雜，高手以爲煩躁，熟練工以爲不夠快。

再加上，react函數式編程以及 DOM-diff 依賴的是html tag的緣故，所以咱們須要手動優化 React 的性能，臭名昭著的shouldComponentUpdate由此而來。

爲了更好的解決上述的一些問題，我開始尋找一種方式可以解決：
模版化不多

• 無需手動 shouldComponentUpdate
• API 極少，學習成本低
• mutable API
• 如下就是個人解決方案。

特色

rectx 有着強大的功能，他不只能提供一個狀態庫，甚至能提供一個良好的類型輔助系統，這也意味着你能夠在 TypeScript中支持它！

• 並不依賴 react.context api，支持 1五、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

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

類型提示
得益於 typescript，Rectx獲得了良好的類型提示。

render props 中會有提示
當咱們初始化store之後，咱們的store裏面具體有什麼值，在純 js 中並無智能提示，但加入了 ts 以後，一切會大不同

更新的時候也能有提示

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