Hulu是一家热爱技术的科技公司
更有一群乐于分享技术的小伙伴
自本月起，我们将增加“技术”专栏
在技术道路上，与你同行～
葫芦娃玩转React和Redux
>>>MorganCheng 程墨<<<
上周，Morgan作为Hulu代表，在Velocity会议上做了一个关于“React和Redux”的演讲分享。会后，我们对Morgan进行采访，和大会演讲稿有所不同，我们专门摘取了技术干货分享给伙伴们。
React是什么?
React是一个JavaScript库，类似广为业界所知的jQuery，React可以用来替换jQuery。
让我们打一个比方，React是一个聪明的建筑工人，而jQuery是一个比较傻的建筑工人，开发者你就是一个建筑的设计师，如果是jQuery这个建筑工人为你工作，你不得不事无巨细告诉jQuery“如何去做”，要告诉他这面墙要拆掉重建，那面墙上要新开一个窗户，反之，如果是React这个建筑工人为你工作，你所要做的就是告诉这个工人“我想要什么样子”，只要把图纸递给React这个工人，他就会替你搞定一切，当然他不会把整个建筑拆掉重建，而是很聪明地把这次的图纸和上次的图纸做一个对比，发现不同之处，然后只去做不多不少的修改就完成任务了。
显而易见，React的工作方式把开发者从繁琐的操作中街坊出来，开发者只需要着重“我想要显示什么”，而不用操心“怎样去做”。
React可以看做实现了Web Component的想法，非常利于开发Web应用组件。
Morgan 在现场演讲
Redux是什么?
React可以用来构建应用组件，每个组件可以看作一块砖，我们可以用砖来搭建复杂的建筑，但是砖本身并不是建筑，要把很多砖粘合起来，我们需要另外一种管理应用数据的工具，Redux就是这样的工具，众多MVC框架也是这样的工具。
传统的MVC框架提供了一种组织空间的“习俗”(convention)，但是这种“习俗”很容易被破坏，数据流动的方向依然可以很乱，所以Facebook在推出React的同时，也推出替换MVC的框架Flux，Flux保持单向的数据流动，让应用程序更可控。
不过，Flux也有不足之处，很快业界就出现了Redux这样的框架，Redux保持了Flux单向数据流动的特点，同时保持应用中只有一个Store，每个组件的数据都可以放在这个Store上，而组件只需要关注于逻辑本身。
React和Redux结合的好处是什么？
没有Redux，每个React组件之间就只能直接通讯，这样各组件之间依然会有复杂的依赖关系，有了Redux，所有的组建都只依赖于Redux上的数据，当一个组件想要发一个通知给里另一个组件时，不是直接和那个组件对话，而是发一个action到Redux，改变Redux上的数据状态，由此引发对应组件的重新渲染。
这保持了代码结构的整洁和数据流转的清晰，各组件之间不会形成强耦合关系。
React和Redux在Hulu中的应用有哪些？
Hulu有很多代码是基于jQuery和Backbone来构建的， 虽然React和Redux的组合有很多优势，但是这个技术迁移不可能一蹴而就，所以我们初步推进React和Redux，目前新用户完成注册的品味选择功能就是基于React和Redux，很快用户注册和登录页面都会基于这两种新的技术，这个技术迁移的过程是一个旅程，我们预期在这个过程中还会学到更多的东西。
关于React和Redux最核心的思想是什么？
关于React和Redux，可能不同人有不同的理解，但是我们认为最重要的就是“强调限制而不是强调习俗”（Constraints over Conventions），以往，我们总是通过“习俗”来指导开发人员，但是无论如何苦口婆心地劝说，总是不能避免”习俗”被破坏，而React和Redux则强调“局限”，限制功能的实现方式，让开发者无法写出破坏整体结构的代码出来。
有人说给开发者这样的“局限”是限制开发者的创新能力，但我不这么认为，开发者是创造者不是黑客，创新能力应该放在规则范围内创造新的价值，而不是破坏规则，软件开发是团队活动，所有开发者遵从统一的规范才能产生合力，而”限制”就是为了保证规范被遵守。
点击
阅读原文
可以在slideshare上看到演讲内容