媒介
贫苦快去我的堆栈内里喷：
老子学不动了，求不要更新。
呵呵，你没想到吧，这玩艺儿居然有第三集！我靠，我本身都没想到，让我们偷偷的回忆一下前两集
完全没想到，居然会有第二集！
算了，我都懒得写了，本身看吧，固然不看也无所谓，正式最先。
新的 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.contextapi，支撑 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
