&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！966,690 十一月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
深入浅出React（一）：React的设计哲学 - 简单之美
深入浅出React（一）：React的设计哲学 - 简单之美
ArchSummit全球架构师峰会（北京站）-03日举办，
相关厂商内容
相关赞助商
为中小微企业提供！
上个月React发布了最新的0.13版，并提供了对ES6的支持。在新版本中，一个小小的改变是React取消了函数的自动绑定，也就是说，以前可以这样去绑定一个事件：
&button onClick={this.handleSubmit}&Submit&/button&
而在以ES6语法定义的组件中，必须写为：
&button onClick={this.handleSubmit.bind(this)}&Submit&/button&
了解前端开发和JavaScript的同学都知道，做事件绑定时我们需要通过bind（或类似函数）来实现一个闭包以让事件处理函数自带上下文信息，这是由JavaScript语言特性决定的。而在0.13版本之前，React会自动在初始化时对组件的每一个方法做一次这样的绑定，类似于this.func = this.func.bind(this)，这样在JSX的事件绑定中就可以直接写为onClick={this.handleSubmit}。
表面上看自动绑定给开发带来了便利，而Facebook却这破坏了JavaScript的语言习惯，其背后的神奇（Magic）逻辑或许会给初学者带来困惑，甚至开发者如果从React再转到其它库也可能会无所适从。基于同样的理由，React还取消了对mixin的支持，基于ES6的React组件不再能够以mixin的形式进行代码复用或者扩展。尽管这带来了很大不便，但Facebook认为mixin增加了代码的不可预测性，无法直观的去理解。关于mixin的思考，还可以参考。
以简单直观、符合习惯的（idiomatic）方式去编程，让代码更容易被理解，从而易于维护和不断演进。这正是React的设计哲学。
编写可预测，符合习惯的代码
所谓可预测（predictable），即容易理解的代码。在年初的React开发者大会上，React项目经理Tom Occhino进一步阐述React诞生的，在演讲中提到，React最大的价值究竟是什么？是高性能虚拟DOM、服务器端Render、封装过的事件机制、还是完善的错误提示信息？尽管每一点都足以重要。但他指出，其实React最有价值的是声明式的，直观的编程方式。
软件工程向来不提倡用高深莫测的技巧去编程，相反，如何写出可理解可维护的代码才是质量和效率的关键。试想，一个月之后你回头看你写的代码，是否一眼就明白某个变量，某个if判断的含义；一个新加入的同事想去增加一个小小的新功能或是修复某个Bug，他是否对自己的代码有足够的信心不引入任何副作用？随着功能的增加，代码很容易变得越来越复杂，这些问题也将越来越严重，最终导致一份难以维护的代码。而React号称，新同事甚至在加入的第一天就能开始开发新功能。
那么React是如何做的呢？
使用JSX直观的定义用户界面
JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。但是JSX给人的第一印象却是相当&丑陋&。当下面这样的例子被第一次展示的时候，甚至很多人称之为&巨大的退步（Huge Step Backwards）&：
var React = require(&React&);
var message =
&div class=&hello& onClick={someFunc}&
&span&Hello World&/span&
React.renderComponent(message, document.body);
将HTML直接嵌入到JavaScript代码中看上去确实是一件足够疯狂的事情。人们花了多年时间总结出的界面和业务逻辑相互分离的&最佳实践&就这么被彻底打破。那么React为何要如此另类？
模板出现的初衷是让非开发人员也能对界面做一定的修改。但这个初衷在当前Web程序里已完全不适用，每个模板背后的代码逻辑严重依赖模板中的内容和DOM结构，两者是紧密耦合的。即使做到文件位置的分离，实际上两者还是一体的，并且为了两者之间的协作而不得不引入很多机制和概念。以的首页示例代码为例：
&ul class=&unstyled&&
&li ng-repeat=&todo in todoList.todos&&
&input type=&checkbox& ng-model=&todo.done&&
&span class=&done-{{todo.done}}&&{{todo.text}}&/span&
尽管我们很容易看懂这一小段模板的含义，但你却无法开始写这样的代码，因为你需要学习这一整套语法。比如说，你得知道有ng-repeat这样的标记的准确含义，其中的&todo in todoList.todos&看上去是repeat语法的一部分，或许还有其它语法存在；可以看到有{{todo.text}}这样的数据绑定，那么如果要对这段文本格式化（加一个formatter）该怎么做；另外，ng-model背后又需要什么样的数据结构？
现在来看React怎么写这段逻辑：
render: function () {
var lis = this.todoList.todos.map(function (todo) {
&input type=&checkbox& checked={todo.done}&
&span className=&done-{todo.done}&&{todo.text}&/span&
&ul class=&unstyled&&
可以看到，JSX中除了另类的HTML标记之外，并没有引入其它任何新的概念（事实上HTML标记也可以）。Angular中的repeat在这里被一个简单的数组方法map所替代。在这里你可以利用熟悉的JavaScript语法去定义界面，在你的思维过程中其实已经不需要存在模板的概念，需要考虑的仅仅是如何用代码构建整个界面。这种自然而直观的方式直接降低了React的学习门槛并且让代码更容易理解。
简化的组件模型：所谓组件，其实就是状态机器
组件并不是一个新的概念，它意味着某个独立功能或界面的封装，达到复用、或是业务逻辑分离的目的。而React却：
所谓组件，就是状态机器
React将用户界面看做简单的状态机器。当组件处于某个状态时，那么就输出这个状态对应的界面。通过这种方式，就很容易去保证界面的一致性。
在React中，你简单的去更新某个组件的状态，然后输出基于新状态的整个界面。React负责以最高效的方式去比较两个界面并更新DOM树。
这种组件模型简化了我们思考的方式：对组件的管理就是对状态的管理。不同于其它框架模型，React组件很少需要暴露组件方法和外部交互。例如，某个组件有只读和编辑两个状态。一般的思路可能是提供beginEditing()和endEditing()这样的方法来实现切换；而在React中，需要做的是setState({editing: true/false})。在组件的输出逻辑中负责正确展现当前状态。这种方式，你不需要考虑beginEditing和endEditing中应该怎样更新UI，而只需要考虑在某个状态下，UI是怎样的。显然后者更加自然和直观。
组件是React中构建用户界面的基本单位。它们和外界的交互除了状态（state）之外，还有就是属性（props）。事实上，状态更多的是一个组件内部去自己维护，而属性则由外部在初始化这个组件时传递进来（一般是组件需要管理的数据）。React认为属性应该是只读的，一旦赋值过去后就不应该变化。关于状态和属性的使用在后续文章中还会深入探讨。
每一次界面变化都是整体刷新
数据模型驱动UI界面的两层编程模型从概念角度看上去是直观的，而在实际开发中却困难重重。一个数据模型的变化可能导致分散在界面多个角落的UI同时发生变化。界面越复杂，这种数据和界面的一致性越难维护。在Facebook内部他们称之为&Cascading Updates&，即层叠式更新，意味着UI界面之间会有一种互相依赖的关系。开发者为了维护这种依赖更新，有时不得不触发大范围的界面刷新，而其中很多并不真的需要。React的初衷之一就是，既然整体刷新一定能解决层叠更新的问题，那我们为什么不索性就每次都这么做呢？让框架自身去解决哪些局部UI需要更新的问题。这听上去非常有挑战，但React却做到了，实现途径就是通过虚拟DOM（Virtual DOM）。
关于虚拟DOM的原理我在去年底的有过比较详细的介绍，这里不再重复。简而言之就是，UI界面是一棵DOM树，对应的我们创建一个全局唯一的数据模型，每次数据模型有任何变化，都将整个数据模型应用到UI DOM树上，由React来负责去更新需要更新的界面部分。事实证明，这种方式不但简化了开发逻辑并且极大的提高了性能。
以这种思路出发，我们在考虑不断变化的UI界面时，仅仅需要整体考虑UI的构成。编程模型的简化带来的是代码的精简和易于理解，也即React不断提到的可预测（Predictable）的代码，代码的功能一目了然易于理解。Tom Occhino在2015 React开发者大会上也了React在Facebook内部的应用案例，随着新功能被不断的添加到系统中，开发进度非但没有变慢，甚至越来越快。
单向数据流动：Flux
既然已经有了组件机制去定义界面，那么还需要一定的机制来定义组件之间，以及组件和数据模型之间如何通信。为此，Facebook提出了Flux框架用于管理数据流。Flux是一个相当宽松的概念框架，同样符合React简单直观的原则。不同于其它大多数MVC框架的双向数据绑定，Flux提倡的是单向数据流动，即永远只有从模型到视图的数据流动。
Flux引入了Dispatcher和Action的概念：Dispatcher是一个全局的分发器负责接收Action，而Store可以在Dispatcher上监听到Action并做出相应的操作。简单的理解可以认为类似于全局的消息发布订阅模型。Action可以来自于用户的某个界面操作，比如点击提交按钮；也可以来自服务器端的某个数据更新。当数据模型发生变化时，就触发刷新整个界面。
Flux的定义非常宽松，除了Facebook之外，社区中还出现了很多Flux的不同实现，各有特点，比较流行的包括, , 等等。
让数据模型也变简单：Immutability
Immutability含义是只读数据，React提倡使用只读数据来建立数据模型。这又是一个听上去相当疯狂的机制：所有数据都是只读的，如果需要修改它，那么你只能产生一份包含新的修改的数据。假设有如下数据：
var employee = {
name: &John&,
如果要修改年龄，那么你需要产生一份新的数据：
var updated = {
name: employee.name,
这样，原来的employee对象并没有发生任何变化，相反，产生了一个新的updated对象，体现了年龄发生了变化。这时候需要把新的updated对象应用到界面组件上来进行界面的更新。
只读数据并不是Facebook的全新发明，而是起源于Clojure, Scala, Haskell等函数式编程语言。只读的数据可以让代码更加的安全和易于维护，你不再需要担心数据在某个角落被某段神奇的代码所修改；也就不必再为了找到修改的地方而苦苦调试。而结合React，只读数据能够让React的组件仅仅通过比较对象引用是否相等来决定自身是否要重新Render。这在复杂的界面上可以极大的提高性能。
针对只读数据，Facebook开发了一整套框架，将只读数据的概念引入JavaScript，并且在github开源。如果不希望一开始就引入这样一个较大的框架，React还提供了一个工具类插件，帮助管理和操作只读数据：。
React思想的衍生：React Native, React Canvas等等
在前几天的Facebook F8开发者大会上，终于众望所归的发布，它将React的思想延伸到了原生移动开发。它的口号是&Learn Once, Write Anywhere&，有React开发经验的开发人员将可以无缝的进行React Native开发。无论是组件化的思想，调试工具，动态代码加载等React具有的强大特性都可以应用在React Native。相信这会对以后的移动开发布局产生重要影响。
React对UI层进行了完美的抽象，写Web界面时甚至能够做到完全的去DOM化：开发者可以无需进行任何DOM操作。因此，这也让对UI层进行整体替换成为了可能。React Native正是将浏览器基于DOM的UI层换成了iOS或者Android的原生控件。而Flipboard则将UI层换成了Canvas。
是Flipboard出品的一套前端框架，所有的界面元素都通过Canvas来绘制，infoQ之前也有文章对其进行了介绍。Flipboard追求极致的性能和用户体验，因此对浏览器的缓慢DOM操作深恶痛绝，不惜大刀阔斧彻底舍弃了DOM，而完全用Canvas实现了整套UI控件。有兴趣的同学不妨一试。
React并不是突然从哪里蹦出来，而是为了解决前端开发中的痛点而生。以简单为原则设计也决定了React具有极其平缓的学习曲线，开发者可以快速上手并应用到实际项目中。本文总结分析了其相关技术背后的设计思想，希望通过这个角度能让大家对React有一个总体的认识，从而在React的实际项目开发中，遵循简单直观的原则，进行高效率高质量的产品开发。
React官方网站：
React博客：
React入门：
颠覆式前端UI框架：React：
Immutable.js:
React Native:
Flux框架对比：
React开发者大会网站：
React在Slack上的聊天社区：
感谢对本文的审校。
给InfoQ中文站投稿或者参与内容翻译工作，请邮件至。也欢迎大家通过新浪微博（，），微信（微信号：）关注我们，并与我们的编辑和其他读者朋友交流。
Author Contacted
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
Re: 关于&严谨&
Li Hannibal
Re: 关于&严谨&
Re: 关于&严谨&
从React到Domcom
lang taiji
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
InfoQ每周精要
通过个性化定制的新闻邮件、RSS Feeds和InfoQ业界邮件通知，保持您对感兴趣的社区内容的时刻关注。
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。ReactJS从入门到实战
曾任职千行集团的Web前端核心开发，精通高安防的Web前端研发，主导开发过最高人民法院安全项目，具有多年项目研发经验。
无法运行，请执行js权限
10.Reactjs Ajax
下载APP离线观看
学习Java基本语法、变量、流程控制、修饰符、修饰符、继承、抽象、接口、数组、异常。
HTML5+CSS3是web前端开发的常用基础语言之一，本章将分别从html5相关元素及应用、css3相关元素及应用及html5+css3实战等方面进行介绍，快速入门html5+css3。
Javascript是web前端开发常用技术之一，也是web前端开发必学技术之一，本章麦子学院原创JavaScript视频教程，将围绕其相关基础知识和实际应用全面讲解，让你轻松掌握并精通JavaScript的使用。
麦子学院原创web前端开发常用技术 — ajax视频教程， 主要从ajax的运行环境、元素的应用、及其数据类型的运用等方面进行介绍和实战，让学员能快速入门并精通ajax的使用。
只看我参与的
加载更多↓
开发工具浏览器chromeFireFox编辑工具Sublime Text Webstorm/Intellij IDEAnotepad++atom本地服务器Nginx nodeJS*switchHost 学习清单ReactJS安装和”Hello World”ReactJS
JSXReactJS组件R...
什么是JSXJavaScript extend如何转换JSX transformerBabelJSX的使用元素嵌套 添加属性 JSX vs HTML如何区分大小写特殊标示符classforstyleonChange在线转换https://babeljs.io/repl/备用网址:babel转换: h...
基本示例 讲解示例组件中每个函数组件属性输入
html状态机:每个组件都当成一个状态机处理复合组件继承B继承了A，B是一个A组合A，B，C，D组合成一个新组件parent和owner区别Owner传递props
而不是parent Parent :&d...
什么是statestate代表的是一个组件内部自身的状态（可以是父组件、子孙组件）。改变一个组件自身状态，从语义上来说，就是这个组件内部已经发生变化，有可能需要对此组件以及组件所包含的子孙组件进行重渲染。如何使用 state中存储data应该存储哪些?通过事件触发可能导致UI改变的数据不应该存储哪些...
State1.本组件内的数据2.相对封闭的单元/结构的数据 状态组件 无状态props1.组件之间的数据流动单向的， 从 owner向子组件owner
state ....{data}子组件1， property1={this.state.key1} state子组件2， property2={...
源代码&!DOCTYPE html&&!--[if IE]&&![endif]--&&html&&head&&meta charset=&utf-8&&&meta http-equiv=&X-UA-Compatible& content=&IE=edge,chrome=1&&&title&Top-L...
示例 1.准备挂载到页面2.挂载到页面更新——&3.更新值4.更新DOM卸载5.卸载前注意事项1.更新函数是在更新之后才有的，初始化的时候未执行2.forceupdate是直接引起更新，从willupdate3.移除元素的时候，只能通过拥有者进行元素的替换或者移除 组件的生命周期分成三个状态Moun...
选择反馈类型
请选择分类
请选择反馈类型
你还可以输入200字
请留下你的宝贵意见！～
请留下正确的电话号码，以便我们能帮助你！
滑动完成验证
请滑动进行验证
感谢你的反馈，你的支持永远是我们前进的动力！
亲爱的学员
该课程还有更完整的职业课程大纲哦~
体系化学习，会有更好的学习效果！
直通班课程
抱歉，该课程视频仅限该直通班学员观看哦~
立即报名，您可享有
免费观看所有课程视频
智能在线学习系统
名师小班指导
全国就业服务
还没有账号？
其他方式登录
滑动完成验证
重发验证码
手机短信验证码已发送，请查收！
一名课程顾问想与您沟通