仓库：215566435/rectx前言请到我的仓库喷：学不会了，求更新。呵呵，没想到这东西还有第三集！妈的，我自己都没有想到，还是静静的回顾一下前两集吧。没想到还有第二集！Redux玩腻了，我们造个轮子Rectx第2集：不变的痛点分析第1集来了：Redux玩腻了，我们造个轮子：Rectx算了，懒得写了，看自己看，当然不看也没关系，正式开始了。新的Rectx有何不同？具有可变api的轻量级状态管理器。人家说了，你说轻量级，你来了？？那是肯定的，图书馆只有几k大小。其次，新版本的Rectx不依赖于React.context，因此可以在任何react版本中使用。当然，在短短的60行核心代码中，我写了很多测试，覆盖率达到了98%。那为什么又更新了呢？Redux和Mobx都很棒，但是对于一个大部分项目只是CRUD的项目来说，这些东西有点太重了。而且对于react的immutable哲学，模板代码相当多，对新手、高手、熟练工都不是很友好：新手觉得复杂，高手觉得烦，熟练工觉得不快足够的。另外，react函数式编程和DOM-diff依赖html标签，所以我们需要手动优化React的性能，这就是臭名昭著的shouldComponentUpdate的由来。为了更好的解决上面的一些问题，我开始寻找解决的方法：没有手动shouldComponentUpdateAPI的模板很少，学习成本低。可变API以下是我的解决方案。特性rectx功能强大，不仅可以提供状态库，甚至可以提供很好的类型辅助系统，这意味着你可以在TypeScript中支持它！不依赖react.contextapi，支持15、16版本reactmutableapi，无需编写模板代码完整测试，测试覆盖率高，typescriptd.ts支持，非常友好的类型提示，无需编写shouldComponentUpdate组件Auto(Automatic)高性能，轻量级，最容易上手当然，如果你能看懂这个例子，那我强烈建议你直接去看看我是怎么处理的，这样你就不用写代码沙箱了shouldComponentUpdate示例：从“react”导入React；从“react-dom”导入{render}；从“rectx”导入{init}；const{Put,Ctx}=init({foo:1});constApp=()=>(
{s=>{s.foo}
}Put(s=>(s.foo=s.foo+1))}>add );render(
,document.getElementById('root'));使用
的renderProps形式获取我们想要的数据。值得注意的是，Put(s=>(s.foo=s.foo+1))在这里，我们直接修改了我们的值，这在数据非常复杂的时候尤为宝贵。没有shouldComponentUpdate的组件自动编码沙箱示例import{init}from"rectx";const{Put,Ctx,Auto}=init({foo:1,bar:1});首先我们还是导入我们的组件，Put是用来Update的，Ctx是用来获取的，那么Auto是什么鬼？Auto是一个选择器，可以把我们的Store分开，把每个Store分成小颗粒的块，让我们的代码更加简洁。例如，如果我们想获取全局状态存储中的条，我们可以：constBars=Auto(s=>s.bar);当我们使用Bars时，我们得到的是属性bar。当然，Auto翻译成自动，就是他第一个自动的地方。第二个特性请看下面：importReactfrom"react";import{render}from"react-dom";import{init}from"rectx";const{Put,Ctx,Auto}=init({foo:1,bar:1});constBars=Auto(s=>s.bar);constApp=()=>(
{s=>Foo:{s.foo}
}{Bars(bar=>
Bar:{bar}
)}
Put(s=>(s.foo=s.foo+1))}>改变FooPut(s=>(s.bar=s.bar+1))}>改变Bar );render(
,document.getElementById("root"));首先，Auto是一个选择器，它的作用是获取全局状态，从中选择你关心的属性。当这些属性被选中时，只要这些属性没有被更新过，它们返回的组件就不会被更新。同时，外部属性是否更新与它们无关。熟悉React的同学肯定知道这样做的价值所在，再也不用手动写shouldComponentUpdate了。类型提示感谢打字稿，Rectx是很好的类型提示。渲染道具中会有提示。我们在初始化store的时候，我们的store中具体有哪些值呢？纯js中没有智能提示，但是加入ts后，一切都会很不一样。更新的时候也会有提示。最后，请不要吝啬你的星星，仓库：仓库：215566435/rectx
