-
颠覆式前端
UI
开发框架：
React
作者
王沛
发布于
2014
年
12
月
15
日
|
21
讨论
?
?
?
分享到：
微博微信
FacebookTwi
tter
有道云笔记邮件分享
稍后阅读
我的阅读清单
基于
< br>HTML
的前端界面开发正变得越来越复杂，
其本质问题
基本都可以归结于如何将来自于服务器
端或者用户输入的动态数据高效的反映到复杂的用
户界面上。而来自
Facebook
的
React
框架正是
完全面向此问题的一个解决方案，按官网描
述，其出发点为：用于开发数据不断变化的大型应用程
序（
Bu
ilding large applications with data that changes
over time
）
。相比传统型的前端开发，
React
开辟了一个相当另类的途径，实现了前端界面的高效率高性能开发
。
首先，对于
React
，有一些认识误区，这里先总结一下：
?
?
?
?
React
不是一个完整的
MVC
框架，最多可以认为是
MVC
中的
V
（
View
），甚至
React
并不非
常认可
< br>MVC
开发模式；
React
的服务器端
Render
能力只能算是
一个锦上添花的功能，并不是其核心出发点，事实上
React
官方站点几乎没有提及其在服务器端的应用；
有人拿
React
和
Web Component
相提并论，但两者并不是完全的竞争关系，你完全可以用
React
去开发一个真正的
Web
Component
；
React<
/p>
不是一个新的模板语言，
JSX
只是一个
表象，没有
JSX
的
React
也能工作。
1.
React
的原理
在
Web
开发中，我们总需要将变化的数据实时反应到
U
I
上，这时就需要对
DOM
进行操作。
而复
杂或频繁的
DOM
操作通常是性能
瓶颈产生的原因（如何进行高性能的复杂
DOM
操作通常是衡量
一个前端开发人员技能的重要指标）。
React
为此引入了虚拟
DOM
（
V
irtual DOM
）的机制：在浏
览器端用
Javascript
实现了一套
DOM API
。
基于
React
进行开发时所有的
DOM
构造都是通过虚拟
DOM
进行，每当数据变化时，
React
都会重新构建整个
DOM
树，然后
React
将当前整个
DOM
树<
/p>
和上一次的
DOM
树进行对比，得到
DOM
结构的区别，然后仅仅将需要变化的部分进行实际的浏
览器
DOM
更新。而且
React
能够批处理虚拟
DOM
的
刷新，在一个事件循环（
Event Loop
）内的
两次数据变化会被合并，例如你连续的先将节点内容从
A
变成
B
，然后又从
B
变成
A
，
React<
/p>
会认
为
UI
不发
生任何变化，
而如果通过手动控制，
这种逻辑通常是极其复杂的
。
尽管每一次都需要构造
完整的虚拟
D
OM
树，
但是因为虚拟
DOM
是内存数据，
性能是极高的，
而对实际
DOM
进行操作的
仅仅是
Diff
部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再
需要关注
某个数据的变化如何更新到一个或多个具体的
DOM<
/p>
元素，而只需要关心在任意一个数据状态下，
整个界面是如何
Render
的。
相关厂商内容
CoreOS
实战，
etcd
详解，不可错过的学习资料。<
/p>
DevOps
的概念与实践，
InfoQ
迷你书
D
ocker
周报、深入浅出
Docker
、源码解读，
2015
必读。
前
JavaEye
网站创始人范凯：一个程
序员的创业寻梦坎坷之路
5
月
21
日
AWS
在线课
堂：基于
AWS
云平台的高可用应用设计
如果你像在
90
年代那样写过服务
器端
Render
的纯
Web
页面那么应该知道，服务器端所要做的就
是根据数据
Render
出
HTML
送到浏览
器端。
如果这时因为用户的一个点击需要改变某个状态文字，
那
么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段
HTML
发生了变化，而只
需要根据数据刷新整个页面。换句话说，任何
UI
的变化都是通过整体刷新来完成的。而
Re
act
将
这种开发模式以高性能的方式带到了前端，每做一点界
面的更新，你都可以认为刷新了整个页面。
至于如何进行局部更新以保证性能，则是
React
框架要完成的事情。
借用
Facebook
介绍
React
的视频
中聊天应用的例子，当一条新的消息过来
时，传统开发的思路如
上图，你的开发过程需要知道哪条数据过来了，如何将新的
DOM
结点添加到当前
DOM
树上；而
基于
React
的开
发思路如下图，你永远只需要关心数据整体，两次数据之间的
UI
如何变化，则完
全交给框架去做。
可以看到，
使用
React
大大降低了逻辑复杂性，
意味着开发难度降低，
可能产生
Bug
的机会也更少。
至于
React
如何做到将原来
O(n^3)
复杂度的
Diff
算法降低到
O
（
n
），大家可以参考
这篇文章
。
2.
组件化的开发思路
虚拟
DOM
不仅带来了简单的
UI
开发逻辑，同时也带来了组件化开发的思想，所谓组件，即封装起
来的具有独立功能的
UI
部件。
React
推荐以组件的方式去重新思考
UI
构成，
将
UI
上每一个功能
相
对独立的模块定义成组件，然后将小的组件通过组合或者嵌套的方式构成大的组件，最
终完成整体
UI
的构建。例如，
Fac
ebook
的
整站都采用了
React
来开发，整个页面就是一个大
的组件，
其中包含了嵌套的大量其它组件，大家有兴趣可以看下它背后的代码。
如果说
MVC
的思想让你做到视图
-
数据
-
控制器的分离，那么组件
化的思考方式则是带来了
UI
功能
模块
之间的分离。我们通过一个典型的
Blog
评论界面来看
MVC
和组件化开发思路的区别。
对于
MVC
开发模式来说，开发者将三者定义成
不同的类，实现了表现，数据，控制的分离。开发
者更多的是从技术的角度来对
UI
进行拆分，实现松耦合。
对于
React
而言，则完全是一个新的思路，开发者从功能的角度出发，将
UI
< br>分成不同的组件，每
个组件都独立封装。
-
-
-
-
-
-
-
-
-
上一篇：英语四级题库
下一篇：雅思写作中因果关系表达的干货总结