近几年来，前端框架层出不穷，我们不禁感叹【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net，不知道未来两年还会有什么新框架出现。这【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net种无力的感叹，究竟是因为前端的想象力太过【未经授权禁止转载】原创内容，盗版必究。丰富，人才太多，各自新式花样的东西会冒出本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。来，还是因为有内在的规律？我相信，作为一【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。个历史学系毕业的学生，万事皆有规律，这种【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。规律支配着下一代编程的可能性。
著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】有些人觉得这是玄学，他认为，之所以有这样未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net的规律，是因为那些东西胜出了，胜者为王，转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。历史都是胜利者书写。然而，如果把逻辑反过【原创内容，转载请注明出处】【本文受版权保护】来，自问，为什么在众多框架中，vue、r【版权所有】唐霜 www.tangshuang.net【作者：唐霜】eact如日中天，为什么typescri【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】pt越来越被接纳？难道是因为他们本身太过【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】优秀？为什么webpack这么火，打包工【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net具不是没有rollup如此优秀，怎么不是本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】它火爆到如此？为什么seajs挂了？
【未经授权禁止转载】【本文首发于唐霜的博客】【本文受版权保护】我认为，更多的原因，是因为他们用最恰当的方式解决了当下开发者的痛点。
【作者：唐霜】著作权归作者所有，禁止商业用途转载。抽象化
而痛点是什么？这就是我们今天要讨论的话题本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。。当下这个时代，前端开发的痛点有两个：1【转载请注明来源】【版权所有】唐霜 www.tangshuang.net.抽象化；2.同构。抽象化是指将某种原本本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】混杂的概念，抽象为某种逻辑清晰的理念，最【原创不易，请尊重版权】原创内容，盗版必究。成功的，当属“Virtual DOM”。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。同构，是指写一套代码，在不同端使用，PC【作者：唐霜】【未经授权禁止转载】、手机、服务器……总之，这两点都是当下已【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】经探索出门路的东西，所以，才有那么多东西【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】围绕这两天冒出来。
转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】ng.net【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。其实同构这个痛点解决起来轻松很多，大家都【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】有思路，只是方案不同，京东凹凸实验室做了【原创不易，请尊重版权】【原创内容，转载请注明出处】一个项目，叫Taro，用以实现一套代码，著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。构建出在PC、app、微信小程序等多个平【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】台运行的应用。同构大家都有思路，只是方案【原创内容，转载请注明出处】【原创不易，请尊重版权】还没有完善而已。
原创内容，盗版必究。【作者：唐霜】但是，抽象化，则更像是一个哲学问题，它要【原创内容，转载请注明出处】【未经授权禁止转载】研究，要实验，要有理论支撑，要集大成，要【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】有权威人物发言，要有知名厂商站台。因此，【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。在对前端开发规范、标准、模式等各个方面的【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】竞争，就像一场军备竞赛一样，很多人既不甘【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】心，又不得不使用最流行的框架或规范。
著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】ang.net著作权归作者所有，禁止商业用途转载。【转载请注明来源】也正是因为这样，我们在感觉到这几年前端领【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】域的混乱的同时，似乎也感觉到另外的东西，未经授权，禁止复制转载。【作者：唐霜】前端正在范式化，很多问题都在被解决，虽然本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】有些方案看上去还没有变得非常权威，但确实【原创内容，转载请注明出处】原创内容，盗版必究。起到了一个探索的过程，这些探索像从四面八【转载请注明来源】【未经授权禁止转载】方出发，慢慢堆积出前端这座大厦的主体框架本文版权归作者所有，未经授权不得转载。【转载请注明来源】，并且已经在添砖了。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。举一个例子，前端推行函数式编程。而函数式本文作者：唐霜，转载请注明出处。【转载请注明来源】的特点就是纯函数，纯函数是一个无状态的运【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。行器，无论多少次，只要给的输入相同，输出【未经授权禁止转载】【版权所有，侵权必究】也一定相同。那么这就会有一个疑问，既然相【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。同输入是一样的输出结果，为何不缓存起来呢【本文首发于唐霜的博客】【原创内容，转载请注明出处】？是的，最大的问题是，要以怎样的代码来实【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】现，让开发者可以非常爽的使用这个工具，写【版权所有，侵权必究】【本文受版权保护】最少的代码，以最浅薄的认知，就实现这个效【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】果呢？有一个包，叫reselect，它实本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。现了一套这样的机制。而redux中的re【作者：唐霜】【本文受版权保护】ducer也要求是纯函数，因此，把这两者原创内容，盗版必究。本文作者：唐霜，转载请注明出处。结合起来，就得到了一个答案。
【未经授权禁止转载】【版权所有】唐霜 www.tangshu【版权所有，侵权必究】【本文受版权保护】ang.net当你读到这里，你可能蒙圈儿了。这篇文章到【版权所有，侵权必究】未经授权，禁止复制转载。底要讲什么？下面，我们就将正式的进入我们未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】的话题。
【原创内容，转载请注明出处】【作者：唐霜】【访问 www.tangshuang.n未经授权，禁止复制转载。原创内容，盗版必究。et 获取更多精彩内容】驱动模式
而前端领域抽象化话题下，有个话题不得不单【转载请注明来源】【原创不易，请尊重版权】独拿出来讲，那就是程序的驱动模式。
【原创内容，转载请注明出处】【本文受版权保护】什么是程序的驱动模式？简单的说，就是一套本文作者：唐霜，转载请注明出处。【本文受版权保护】程序里面，它依靠何种模式去运行。一旦在技【本文受版权保护】本文作者：唐霜，转载请注明出处。术选型中确认了驱动模式，这个应用的一生就【原创不易，请尊重版权】原创内容，盗版必究。不得不在这个模式下开发，驱动模式就是它的【原创不易，请尊重版权】【本文首发于唐霜的博客】基因。想要更换驱动模式？不可能的，即便是原创内容，盗版必究。未经授权，禁止复制转载。重构，也不可能，除非你的上级允许你把原有【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】产品当作一个新产品，完完全全重新写过，否转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。则永远无法逃脱这个驱动模式。
【版权所有，侵权必究】【访问 www.tangshuang.n未经授权，禁止复制转载。【作者：唐霜】et 获取更多精彩内容】原创内容，盗版必究。举个例子，如果你的应用一开始选择了rea【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。ct作为基本库，那么后面切换到vue或者【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。angular可能吗？不可能。但是，如果原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】你后面切换到taro的体系，可能吗？完全【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net没问题。因为react和taro的驱动模【作者：唐霜】【作者：唐霜】式完全一模一样，因为taro就是按rea本文作者：唐霜，转载请注明出处。【作者：唐霜】ct的模式开发的。同样的道理，使用zet著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】op替代jquery是可以的，使用req著作权归作者所有，禁止商业用途转载。【作者：唐霜】uirejs替代seajs也是可行的，使转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】用angular2替代angular1比转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】较困难，但大体还是有办法。用rollup本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net替代webpack，用yarn替代npm本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，用其他什么东西替代babel，只要它们【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】的驱动模式相同，就是可行的，只是需要付出【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net迁移成本。
本文作者：唐霜，转载请注明出处。原创内容，盗版必究。虽然我的资历尚浅，但是很幸运的是，我接触【转载请注明来源】【未经授权禁止转载】到了非常多的前端框架（框架级库）。下面我本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net列出：
【转载请注明来源】著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshua【作者：唐霜】本文版权归作者所有，未经授权不得转载。ngnet】原创内容，盗版必究。- jquery 【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。et 获取更多精彩内容】转载请注明出处：www.tangshua【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】ng.net【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】ang.net【版权所有，侵权必究】
- backbone 【版权所有】唐霜 www.tangshu【转载请注明来源】【版权所有】唐霜 www.tangshuang.netang.net著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ang.net
- angular 【作者：唐霜】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【本文受版权保护】ang.net
- react 原创内容，盗版必究。未经授权，禁止复制转载。【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ang.net
- vue 【作者：唐霜】【原创内容，转载请注明出处】
这里列出来的5个，代表着过去10年来，前【未经授权禁止转载】原创内容，盗版必究。端领域最为重要的东西：如何驱动一个应用。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】【关注微信公众号：wwwtangshua未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netngnet】答案很明显，jquery通过简化DOM操【本文受版权保护】原创内容，盗版必究。作，同时它提供了非常多的辅助方法，让开发【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】者极其迅速的实现应用交互。可以说，jqu【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】ery就是前端领域的诺基亚，若不是rea【原创内容，转载请注明出处】【本文受版权保护】ct的出现，它还会过得很舒服。那么问题来【转载请注明来源】【未经授权禁止转载】了，为什么backbone和angula【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。r没有打败jquery？其实说实话，它们转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net根本没有要打架的意思，它们都拥抱jque原创内容，盗版必究。【原创不易，请尊重版权】ry。backbone提供的是数据层面的【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。模式，视图操作还是要靠jquery。an【转载请注明来源】本文版权归作者所有，未经授权不得转载。gular更不用说，干脆直接集成jque原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。ry。这究竟是为什么？
【版权所有】唐霜 www.tangshu著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】ang.net【原创不易，请尊重版权】实际上，如果你慢慢读我下面的内容，你就会原创内容，盗版必究。未经授权，禁止复制转载。发现，他们是在同一种驱动模式下实现的东西【本文受版权保护】【版权所有】唐霜 www.tangshuang.net，只是解决了不同的问题而已。其中非常值得【本文受版权保护】【关注微信公众号：wwwtangshuangnet】一提的是backbone，它是这一时期的著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。最高提炼，甚至有些过了头。backbon【本文受版权保护】原创内容，盗版必究。e的终极，是要建立一套数据驱动视图的机制转载请注明出处：www.tangshuang.net原创内容，盗版必究。，但是它只管数据，而不管视图，它差就差了【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。这一步，如果它能够在“驱动视图”这个层面【本文受版权保护】著作权归作者所有，禁止商业用途转载。有所突破，比如它在它那个时候想到“数据改原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。动时，找出最小的改动范围，只更新这部分数【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】据对应的视图”这样的方案的话，那么后面可本文作者：唐霜，转载请注明出处。【转载请注明来源】能就没react多少事了。可惜啊可惜，那【未经授权禁止转载】未经授权，禁止复制转载。个时代，思维可能还不能这么超前，所以今天著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。，backbone就像完成了历史使命一样原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net，等待着失去生命那一天。
转载请注明出处：www.tangshua原创内容，盗版必究。【本文受版权保护】ng.net【转载请注明来源】【访问 www.tangshuang.n未经授权，禁止复制转载。【本文受版权保护】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。ang.net是的，“数据驱动视图”，是react和v本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ue大获成功的核心所在。react最终找【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。到了突破backbone没有突破的那个点【原创不易，请尊重版权】未经授权，禁止复制转载。，那就是用virtual DOM来实现数【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。据到视图这个过程。
【关注微信公众号：wwwtangshua【本文受版权保护】【原创内容，转载请注明出处】ngnet】【版权所有】唐霜 www.tangshu【原创内容，转载请注明出处】【本文首发于唐霜的博客】ang.net说了这么多，这5个框架的最本质区别是什么原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】？答案很明显啊：驱动模式。
本文作者：唐霜，转载请注明出处。【转载请注明来源】- jquery、angular、backb【作者：唐霜】【原创内容，转载请注明出处】one：事件驱动 本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshu原创内容，盗版必究。【未经授权禁止转载】ang.net
- vue、react：数据驱动（这里还有更转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。深的讨论） 【访问 www.tangshuang.n本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】et 获取更多精彩内容】未经授权，禁止复制转载。【版权所有，侵权必究】【本文受版权保护】
backbone虽然想要解决“数据驱动视【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】图”这个问题，但是很无奈，它构建了数据响本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】应的一种方式，也就是和jquery、an【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netgular一模一样的方式：事件响应。
本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。【版权所有】唐霜 www.tangshu【本文受版权保护】【未经授权禁止转载】ang.net【原创内容，转载请注明出处】响应式编程
阅读本文，你需要有一种思维的跳跃过程。终【未经授权禁止转载】【作者：唐霜】于，你看到了标题中提到的东西。为什么现在本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net才讲到标题上的东西？因为，终于出现了“事【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net件响应”。事件响应，它是响应式编程的一种。
著作权归作者所有，禁止商业用途转载。【作者：唐霜】转载请注明出处：www.tangshua【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ng.net著作权归作者所有，禁止商业用途转载。所谓响应式编程，是指不直接进行目标操作，未经授权，禁止复制转载。【转载请注明来源】而是用另外一种更为简洁的方式通过代理达到目标操作的目的。举个例子，还是vir【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】tual DOM，通过修改数据，实现对D【版权所有，侵权必究】【版权所有，侵权必究】OM的更新。那么问题来了，修改数据到DO【转载请注明来源】著作权归作者所有，禁止商业用途转载。M更新这个过程，怎么实现联动呢？再说明白未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net一点，这套代码怎么在我修改了数据之后，去【转载请注明来源】【版权所有】唐霜 www.tangshuang.net更新DOM呢？如果是react，那就比较【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。好解释，通过setState方法更新状态【转载请注明来源】原创内容，盗版必究。，并且setState方法内会联动去执行【原创内容，转载请注明出处】原创内容，盗版必究。virtual DOM中的diff和pa原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】tch操作，这样就会更新界面。但是在vu本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】e里面就相对复杂一些，vue里面直接修改本文版权归作者所有，未经授权不得转载。【转载请注明来源】this上面的一个属性，就可以更新界面了转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。。虽然我们现在都知道，vue是用defi【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。neProperty重写了属性的sett【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。er，但是这一整套机制实现起来，可不是三【版权所有，侵权必究】【未经授权禁止转载】两句就说完的。
本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】react之所以好解释，是因为如果单纯讲【转载请注明来源】原创内容，盗版必究。react本身，它其实在响应式这个问题上著作权归作者所有，禁止商业用途转载。【本文受版权保护】和vue有非常大的区别，因为如果单纯看s转载请注明出处：www.tangshuang.net原创内容，盗版必究。etState，它根本没有响应式，它的响转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。应，是要通过在jsx上绑定事件来实现，因未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。此，单纯看react，它的响应式和ang【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】ular并无大异，甚至还不如angula未经授权，禁止复制转载。【本文首发于唐霜的博客】r。这可能会气坏react的追随者，但事【本文受版权保护】【原创内容，转载请注明出处】实就是如此。angular的脏检查机制，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。从体系的层面讲，等同于react里面se【作者：唐霜】【作者：唐霜】tState+virtual DOM，而【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。angular里面不需要setState【关注微信公众号：wwwtangshuangnet】【本文受版权保护】，而是像vue里面一样直接修改数据，编程【版权所有】唐霜 www.tangshuang.net【本文受版权保护】体验上更舒服的多。那么是什么让react本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net变得不一样？是redux！！！是的，re著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。dux及其生态，简直就是这个时代最最最了本文版权归作者所有，未经授权不得转载。【本文受版权保护】不起的发明之一，当然，redux是按fl【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。ux实现的，因此，说Facebook的工【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。程师伟大，也不为过。实体的东西叫了不起，【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】思想的东西才叫伟大。
【访问 www.tangshuang.n【转载请注明来源】转载请注明出处：www.tangshuang.netet 获取更多精彩内容】本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】回到响应式这个话题。
转载请注明出处：www.tangshua【原创不易，请尊重版权】【原创内容，转载请注明出处】ng.net本文作者：唐霜，转载请注明出处。一套代码里面，怎么做到，当一个东西发生了本文作者：唐霜，转载请注明出处。【未经授权禁止转载】变化，另外一个东西知道它变了，自己也马上著作权归作者所有，禁止商业用途转载。【本文受版权保护】作出调整？
转载请注明出处：www.tangshua著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】ng.net未经授权，禁止复制转载。【作者：唐霜】我们来看看响应式和非响应式的区别：
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu本文版权归作者所有，未经授权不得转载。【作者：唐霜】ang.net【关注微信公众号：wwwtangshua【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ngnet】// 非响应式
var a = 1
var b = a + 3
var _temp = a
setInterval(() => {
if (_temp !== a) {
b = a + 3
_temp = a
}
}, 16)
上面这段代码超级容易理解。b是依赖于a的本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，当a发生变化的时候，b也发生变化。那么【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】非响应式是怎么做的？写一个定时器，不断跑【本文受版权保护】转载请注明出处：www.tangshuang.net，如果在跑的过程中，发现a变了，那么赶紧【作者：唐霜】本文版权归作者所有，未经授权不得转载。把变化之后的值运算之后给b，这样b也就跟【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net着变了。
转载请注明出处：www.tangshua【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ng.net转载请注明出处：www.tangshua【未经授权禁止转载】原创内容，盗版必究。ng.net// 响应式
$scope.a = 1
$scope.b = a + 3
$scope.$watch('a', (a) => {
$scope.b = a + 3
})
上面这段代码也比较容易理解。用一个$wa未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。tch方法去观察a这个属性，如果它变了，【本文受版权保护】未经授权，禁止复制转载。马上执行watch的第二个参数函数。“观原创内容，盗版必究。原创内容，盗版必究。察”，这个词引出了一个设计模式：观察者模本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】式。被观察的对象，将要观察的部分，以及发【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】生变动后要做什么事情，这两个东西交给观察著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】者，当观察者发现被观察对象的这个部分发生【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net变动的时候，就执行要做的事情。这就是观察【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】者模式的基本思路。这种思路普遍存在于jq【转载请注明来源】【版权所有】唐霜 www.tangshuang.netuery、angular、backbon本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.nete中，这也是早期框架、库无法逃脱的宿命，【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。它们遵循这一驱动模式。
本文版权归作者所有，未经授权不得转载。【转载请注明来源】而响应式编程，就是这一驱动模式下的一种编【本文首发于唐霜的博客】【版权所有，侵权必究】程方式。开发者写一段代码要实现某个操作时【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】，他并不立即用代码去写这个操作，而是使用【未经授权禁止转载】【转载请注明来源】了一个代理（这个代理一般由框架或库实现）原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net，这个代理的作用是，当用户进行了某个操作【转载请注明来源】【版权所有】唐霜 www.tangshuang.net时，触发了某个变动（事件或数据变动），而原创内容，盗版必究。【本文受版权保护】这个变动触发了代理中的某些特定项，而这些【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】特定项被触发时，和它们绑定的目标操作就会【版权所有，侵权必究】未经授权，禁止复制转载。自动执行。虽然这个过程比直接用代码写操作【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。过程本身复杂，但是对于开发者而言不是，开转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。发者只写用户进行操作时会触发哪个变动，这著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】样代码量就极速下降，甚至只需要一行代码。
著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】这就是响应式编程的优势，它利用代理（一般转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net是经过高级封装的一套逻辑）阻断了变动和操【本文受版权保护】本文版权归作者所有，未经授权不得转载。作的直接关系，而是将变动和操作分离，但通本文版权归作者所有，未经授权不得转载。【转载请注明来源】过代理，又可以准确的执行变动带来的操作。
转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。【本文受版权保护】ng.net【版权所有，侵权必究】响应式的分流
当知道什么是响应式编程之后，我们就该讨论【本文受版权保护】【关注微信公众号：wwwtangshuangnet】vue和react+redux的不同了。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。不过我可不是直接的人，在没有理清楚逻辑的【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net时候，直接告诉你答案显得轻浮。
著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【原创内容，转载请注明出处】我们接下来要讨论的是，世界上都有哪些已有【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net的响应式编程。原来，响应式编程还要分流派转载请注明出处：www.tangshuang.net【作者：唐霜】。没错！
未经授权，禁止复制转载。【作者：唐霜】【原创内容，转载请注明出处】事件响应
这是我们最早知道的一种响应式编程方式。时【本文首发于唐霜的博客】【原创内容，转载请注明出处】间倒退10年，我们会在网页中，利用DOM【未经授权禁止转载】【作者：唐霜】节点的事件钩子来做一些事情，例如当用户输【未经授权禁止转载】原创内容，盗版必究。入关键字的时候，利用xhr搜索，让用户可【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net以看到一个推荐列表。现在听起来这个功能好未经授权，禁止复制转载。【转载请注明来源】土啊，但是回到10年前，真的不得了，我记【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】得百度是2010年才有这个功能的吧。
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netng.net但现在是2018年了，事件响应简直简单的原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net要死，连HTML5都规定了addEventListener这样的api，简直抢了jquery的饭碗原创内容，盗版必究。【本文首发于唐霜的博客】。但是，我还是要提backbone，虽然【转载请注明来源】【本文受版权保护】这件事是jquery先做的，什么事？那就原创内容，盗版必究。未经授权，禁止复制转载。是抽象出事件响应的书写方式，也就是提供o【未经授权禁止转载】未经授权，禁止复制转载。n/off/trigger这三个主要方法【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】，实现一整套事件的绑定、解除、触发逻辑。本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】之所以觉得backbone更高级，是因为【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netbackbone试图完全脱离view层面【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】，jquery的这些方法，大部分还是向D本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。OM节点绑定事件，但backbone完全【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net是自定义事件，脱离了DOM事件体系，触发本文作者：唐霜，转载请注明出处。【转载请注明来源】事件是为了修改数据。
本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【关注微信公众号：wwwtangshua【作者：唐霜】著作权归作者所有，禁止商业用途转载。ngnet】angular里面对事件响应做了更高级对【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】封装，它把对DOM节点绑定的事件和对数据著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。操作绑定的事件这两件事抹平，成为一件事，转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】它把点击抽象为ng-click，ng-c【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】lick实际要做两件事，一件是绑定事件到【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。DOM节点上，另一件是当DOM事件被触发【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。时同时触发绑定的数据操作。因此，当ng-著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】click传入的函数被执行时，会同时执行本文版权归作者所有，未经授权不得转载。【作者：唐霜】所有$watch的函数，实现脏检查。an转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。gular本身实现的是backbone那著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net一套事件响应，但同时，它也借助了DOM事本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】件响应的原生特性。这使得angular成转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】为早起最不得了的框架。
未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshu【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】ang.net转载请注明出处：www.tangshua【未经授权禁止转载】本文作者：唐霜，转载请注明出处。ng.net数据响应
借鉴于angular，但和angular【作者：唐霜】【未经授权禁止转载】不同，vue走了另外一条路。vue要做的【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】，是解决backbone没有解决的问题。【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。它不去寻求中间的那一层代理，而是直接实现转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net数据变动的联动效果。在前面举例一个数据变【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。了另外一个数据跟着变的代码的时候，有一种著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】更快速的实现方式：
【作者：唐霜】本文作者：唐霜，转载请注明出处。var a = 1
var b = a + 3
function setA(value) {
a = value
b = a + 3
}
在每次想要修改a的时候，调用setA，而著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net非直接a = 0，这样可以做到a变的时候著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net，b也跟着变。这叫响应式？如果非得说概念【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。的话，这还真是，只是代码看上去不那么优雅【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net吧。
未经授权，禁止复制转载。【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。不知道你有没有用过chai.js，里面有【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。一种should方式。这种方式修改了整个【未经授权禁止转载】本文作者：唐霜，转载请注明出处。作用域，使得要测的变量拥有了should本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】属性，非常了不起。为什么要讲这个？因为我未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】们也可以用一种方式，不要用setA这么俗未经授权，禁止复制转载。原创内容，盗版必究。的方式修改a，因为太不直观了，我就想要a著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 = 0。
转载请注明出处：www.tangshua【本文受版权保护】转载请注明出处：www.tangshuang.netng.net本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshua【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。ng.net转载请注明出处：www.tangshua未经授权，禁止复制转载。【版权所有，侵权必究】ng.netvue就是干了这么一件事，它抹掉了set【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。A这个操作，使得直接修改this上的某个转载请注明出处：www.tangshuang.net【转载请注明来源】属性时，就可以触发目标操作（更新界面）。著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】这种将其他操作抽象到数据操作上的响应模式【转载请注明来源】未经授权，禁止复制转载。，就叫“数据响应”。它把对界面操作的目标本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，抽象为对数据操作，也就是抹平了angu转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netlar里面的$watch，抹平了back本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netbone里面的on/trigger，其实本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net也就是抹平了事件响应里面的“观察者”这个转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】环节，也就是不需要观察者，因为它不依赖于事件。
【本文受版权保护】【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】【版权所有】唐霜 www.tangshu【作者：唐霜】【关注微信公众号：wwwtangshuangnet】ang.net基于数据响应，其实可以做非常多的事。在v【版权所有，侵权必究】转载请注明出处：www.tangshuang.netue里面，数据响应的下一步是通过virt【本文受版权保护】转载请注明出处：www.tangshuang.netual DOM实现界面的更新。而如果将这【未经授权禁止转载】【本文首发于唐霜的博客】个模式运用到服务端开发，也是可以的。我之本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】前发布了自己写的最新的包objext，它【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】就是将数据响应抽象化，使得数据响应脱离v转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netue这种要操作界面的具体场景，数据响应，本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】应该可以运用于任何场景。当然，objex本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】t只是一个非常小的东西，如果想要更加高级转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。功能的，可以了解下mobx。
【版权所有，侵权必究】【版权所有】唐霜 www.tangshu未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。ang.net事件流响应
2018年真是多事之秋，原本以为数据响应转载请注明出处：www.tangshuang.net原创内容，盗版必究。，已经是最了不起的模式了，然而，RxJS【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。的突然爆热，让响应式编程出现了新的视野，【转载请注明来源】本文版权归作者所有，未经授权不得转载。原来以为只有事件响应和数据响应，没想到响【本文受版权保护】本文版权归作者所有，未经授权不得转载。应式里面还有新的风骚操作。
未经授权，禁止复制转载。【转载请注明来源】【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。【转载请注明来源】ngnet】RxJS并非完全首创，实际上HTML5已【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。经有类似的东西出来了，那就是Mutati未经授权，禁止复制转载。【作者：唐霜】onObserver，这个看上去很容易让【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】人忽略的接口，却对于一不小心看到的开发者【版权所有，侵权必究】【版权所有，侵权必究】来说，简直就像捡到一块宝。Mutatio【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。nObserver将DOM的操作变为可观【未经授权禁止转载】原创内容，盗版必究。察的，在这之前，我们操作DOM，没有一个【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net事件可以知道，一个DOM节点是不是被删掉著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。了，是不是被修改了，而有了Mutatio【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.netnObserver之后，就可以做到了。既【本文受版权保护】【原创内容，转载请注明出处】然DOM是一个对象，那么基于同样的逻辑，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。能否实现一个东西，可以让一个普通的js对【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】象也可以转变为可观察的呢？RxJS孕育而著作权归作者所有，禁止商业用途转载。【作者：唐霜】生。了解RxJS的同时，需要了解ReactiveX，也就是说，这是一种编程方式，它在不同的【本文受版权保护】【原创内容，转载请注明出处】语言中被实践，不单单包括js。
【未经授权禁止转载】【关注微信公众号：wwwtangshua【本文受版权保护】原创内容，盗版必究。ngnet】【未经授权禁止转载】未经授权，禁止复制转载。那么到底什么是ReactiveX呢？官方未经授权，禁止复制转载。【原创内容，转载请注明出处】的定义是：
【原创内容，转载请注明出处】原创内容，盗版必究。未经授权，禁止复制转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshu本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netang.net【访问 www.tangshuang.n本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】et 获取更多精彩内容】ReactiveX is a combination of the best ideas from
the Observer pattern, the Iterator pattern, and functional programming。
它将事件再度抽象，因为一个应用中，事件往本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net往不是单独存在的，而是一系列事件相继被触【本文首发于唐霜的博客】原创内容，盗版必究。发，因此，它提出了streams的概念，【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】也就是“流”，事件流，总结起来，它就是基【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net于“可观察的事件流”的编程方式。当然，它本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】提到了自己是函数式的编程，这可能是为了蹭【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】热度，强制要让开发者体验最新潮的开发方式【本文受版权保护】本文作者：唐霜，转载请注明出处。，但函数式并非它的最终极目标，没有函数式【本文受版权保护】转载请注明出处：www.tangshuang.net，它照样让开发者体验极致开发，有了函数式本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】，使得它熠熠生辉。
未经授权，禁止复制转载。【原创不易，请尊重版权】那么，RxJS到底优秀在什么地方呢？Rx本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。JS的本质和事件响应一样，是观察者模式的著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】一种实践，通过内部机制，实现观察者，同时【未经授权禁止转载】【原创内容，转载请注明出处】开发者可以通过subscribe方法进行【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net订阅，从而在特定的事件中，达到自己的目的【原创不易，请尊重版权】未经授权，禁止复制转载。。但是，单有观察者模式的实践不足以使它优【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】秀，构建“流”才是它的杀手锏。RxJS是【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net怎么实现“流”的，那就是它结合了迭代器模【未经授权禁止转载】【原创不易，请尊重版权】式。
转载请注明出处：www.tangshua【作者：唐霜】【未经授权禁止转载】ng.net【未经授权禁止转载】什么是迭代器模式？就是开发者可以自己创建【转载请注明来源】【本文受版权保护】一个迭代器，在遍历过程中，开发者创建的这【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】个迭代器规定了遍历的内在逻辑。在RxJS【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。开发时，开发者可以自己规定迭代器，把迭代转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net器作为被观察对象，这样，在运行过程中，事原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】件流（本质上是一个事件订阅序列）就会安装【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】迭代器内的逻辑进行流动。
著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。除此之外，RxJS更是抽象出事件与数据之本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。间的映射关系。我们都知道，virtual原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】 DOM抽象出了数据和真实DOM的映射关【版权所有，侵权必究】【未经授权禁止转载】系，数据改变，DOM改变。RxJS则是抽本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。象出事件与数据之间的映射关系，事件发生，【作者：唐霜】【版权所有，侵权必究】数据按照规定发生变化。RxJS通过各种m【本文受版权保护】【作者：唐霜】ap方法，抹平了事件和数据、事件和事件的【原创内容，转载请注明出处】【转载请注明来源】分离状态，使得事件在RxJS的体系里面，著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】是有序的，可映射为数据变化的东西。因此，原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。RxJS里面的响应方式是：你不需要关心事【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】件本身，而只需要关心事件所映射的数据变化【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】。
未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】虽然RxJS的编程体验非常好，但是有一个【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net问题在于，它是完全新的驱动模式。它不仅改【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】变了开发者的开发习惯，更重要的是，它对项本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】目具有侵入性。我已经说过，要使得一个已有【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。的项目改变驱动模式，是不可能的，如果要在未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。一个原有项目中重新使用RxJS，几乎不可【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net能。而且它的api超级多，使得新晋的开发原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net者可能望而却步。但现在已经是2018年了本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】，什么样的复杂模式不应该了解一下呢？
【未经授权禁止转载】【本文受版权保护】未经授权，禁止复制转载。数据流响应
很明显，有“流”的概念之后，“数据流”的本文版权归作者所有，未经授权不得转载。【本文受版权保护】概念也呼之欲出。数据响应和事件响应的区别【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】是，不需要“观察者”，对数据的操作更加直本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。接。但是有一个问题是，当一套复杂的数据响【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】应被应用于一套复杂的应用中时，开发者往往【本文受版权保护】著作权归作者所有，禁止商业用途转载。在响应来响应去的连环嵌套响应中被搞昏头，【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。因为数据的响应而牵一发动全身，导致整个响【作者：唐霜】本文作者：唐霜，转载请注明出处。应很难控制，这是数据响应必须解决的问题。
本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。ng.net本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n原创内容，盗版必究。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】为了解决这个问题，vue推出了vuex。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netreact本身就没有响应，数据是单向流的【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。，不存在这个问题，但是也正因为react【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】没有响应，所以开发体验极差，因此，有了r本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】edux和react-redux。
本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshu转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ang.net【本文首发于唐霜的博客】数据流响应的本质，是一个状态机。它确定了【本文受版权保护】原创内容，盗版必究。数据在某一时刻的特定状态，数据的不断变化转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net是可以被监控的，上一个状态是什么，变化后【原创不易，请尊重版权】【作者：唐霜】现在的状态又是什么，都可以被开发者知道。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net靠什么来维持这种数据流呢？redux发明【未经授权禁止转载】本文作者：唐霜，转载请注明出处。了reducer机制，通过纯函数式的状态转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。更改器，来保证每一个状态都是独特的不被污转载请注明出处：www.tangshuang.net原创内容，盗版必究。染的。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】【原创内容，转载请注明出处】但是，实际上，redux在“响应”上做的【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。并不完美。react-redux顶多做到【转载请注明来源】【作者：唐霜】了“状态的改动自动映射到界面的改动”，但未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net是它没有解决的是，在数据和状态之间做好映本文作者：唐霜，转载请注明出处。【本文受版权保护】射。现在的redux，你需要创建acti原创内容，盗版必究。原创内容，盗版必究。on和触发dispatch，有没有一种方本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】式，可以不需要手动去触发dispatch【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，数据的响应是事先安排好的，当数据发生变本文作者：唐霜，转载请注明出处。【未经授权禁止转载】化时，自动dispatch？这样可以更完【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。美的提升开发体验。虽然mobx是这样的，本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。但是它忘记抽象出数据流，用mobx管理数【作者：唐霜】【本文首发于唐霜的博客】据，更多的是看中它的响应，但你不能保证对【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。整个应用的状态的准确把握。
未经授权，禁止复制转载。转载请注明出处：www.tangshua【未经授权禁止转载】【转载请注明来源】ng.net本文作者：唐霜，转载请注明出处。【原创内容，转载请注明出处】由此，在“数据流响应”这个点上，实际上，【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】还没有一套完美的解决方案。另外，有人将R原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】xJS和redux结合起来，既发挥了Rx转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】JS在事件管理上的优雅，又保证了数据流的【本文受版权保护】本文版权归作者所有，未经授权不得转载。准确，但这一结合也仅仅主要是为了解决re【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。dux在异步数据数据处理中的问题，没有真【转载请注明来源】著作权归作者所有，禁止商业用途转载。正抽象出数据流动本身的管理。或许，接下来原创内容，盗版必究。【本文首发于唐霜的博客】的一两年，冒出来的新东西，就是在解决这个本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net痛点也说不定。
【版权所有，侵权必究】【关注微信公众号：wwwtangshua原创内容，盗版必究。【未经授权禁止转载】ngnet】【版权所有，侵权必究】未经授权，禁止复制转载。小结
本文从前端的开发体验入手，阐述了“抽象化本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。”“驱动模式”“响应式编程”等问题。前端【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net编程是面向用户体验的编程，它不仅要考虑界【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。面呈现的友好、业务逻辑的准确，还要考虑在著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。编程中如何精准、快速地响应用户操作。响应【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。式编程，是未来的一个趋势，但响应式编程不【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。只有ReactiveX，不应该一提到响应【作者：唐霜】【作者：唐霜】式编程，就限定于ReactiveX。它是原创内容，盗版必究。转载请注明出处：www.tangshuang.net一整套抽象逻辑，除了本文提到的四种响应式【原创不易，请尊重版权】原创内容，盗版必究。之外，说不定再两年，又有新的响应式也不定【转载请注明来源】本文版权归作者所有，未经授权不得转载。。
著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】ng.net
