集团主站
欢迎来到成都达内官方网站!达内—美国上市公司 亿元级外企IT培训企业!
成都it培训哪家好
成都it培训哪家好
全国服务监督电话:15023458194  |   联系客服   |
当前位置:主页 > 培训课程 > web前端 >

成都web开发培训:React的世界观及与Vue之比较

发布者: 成都达内     浏览次数:     发布时间:2019-05-05 13:36:39

学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue。写了一年多,想换换口味了,于是决定最近的新项目改用React试试。...

  成都web开发培训:React的世界观及与Vue之比较

  写在前面:本文谈论的是主观的个人感受,不追求立场的“客观、公正”,因此我下面所说的很可能是错的,欢迎交流指正。

  成都达内小编学习前端时,跟大部分beginner一样,学的第一个框架是Vue,入职后也一直写Vue。写了一年多,想换换口味了,于是决定最近的新项目改用React试试。用了大半个月后,我已经完全被这个迷人的框架洗脑了,特别是它背后的设计理念非常优秀,让人耳目一新。

  React的设计思想有何过人之处呢?拿它和Vue做个对比就清楚了。

  Vue: 填模板游戏继续

  Vue之所以成为国内前端初学者(包括我)的首选,一方面是因为中文文档写得好,更重要的原因则是它符合人们对于网页开发的传统认知。

  Vue虽然内部做了很多工作(如Virtual DOM),但暴露给开发者的体验更像是升级版的模板引擎,类似于Jade、Handlerbars。模板引擎的作用就是在静态的模板上动态替换JS变量,以渲染出最终的页面。基于Vue的项目目录下,每个组件目录下都有html、css、js文件三足鼎立(或者集中到一个.vue文件里,但仍然是分开的三部分),html是静态模板,js管理动态的变量,整体结构非常的直观。

  此外,Vue在模板引擎的基础上增加了“双向绑定”功能,即用户输入造成的DOM变动可以反过来同步给关联的JS变量;并且自定义了一些v指令,大大简化了事件绑定、条件渲染、动态列表等常用功能的实现复杂度。这些因素使得Vue写起来既像模板引擎一样易于理解,又比模板引擎方便很多。我个人写Vue的时候,一般就是先写html模板,在此过程中把需要动态填充的数据定义出来,随手写个mock数据先占位;等模板写完了,再来写获取这些数据的js逻辑。

  也就是说,Vue的开发思路差不多就是“写模板-填模板”的套路,与jQuery时代一脉相承。

  这种套路上手容易,但是没什么发挥空间,写多了真的容易腻烦。而且在JS逻辑越来越复杂的情况下,状态管理非常麻烦,心智负担沉重。

  骚年,要不要换一种玩法试试?

  React: 一种新的玩法

  刚接触React的时候,是不是被嵌在js里的html(JSX)、满天飞的箭头函数、高阶函数等弄得有点不适应?反正我是脑阔疼了好一阵。

  但是进一步了解React后就会明白,这不是脸书的攻城狮们在耍帅或者故弄玄虚,而是这些语法真的能够更好地表达React的思想,帮助代码作者和读者thinking in React。

  React的核心思想是什么呢?不妨来看看Vue和React的组件对比。这是一个非常简单的组件——展示从父组件收到的message字符串:

  Vue的实现:

  // demo.vue

  {{message}}

  React的实现:

  // demo.jsx

  export default props => (

  {props.message}

  );

  这两段代码一眼就能一个非常明显的不同点——Vue组件实现为一个有模板(template)、有数据(props)的对象, React组件则实现为一个输入数据(props)、输出html片段(JSX)的函数。

  函数有什么特别呢?从数学上讲,函数本质上就是表示一种映射关系。React受函数式编程思想的影响,将html视为数据映射的结果。一个数据映射出一个html片段,所有的html片段拼起来,就形成了完整的页面DOM树。当然,React组件还可以是class形式,但只是为了更好地操作数据,最终render函数会完成映射这一步。这是一种截然不同于模板填充的思维方式,姑且称之为“映射思维”。相应的,将变量绑定到模板上的思维方式就称之为“模板思维”。理解这两种思维的对立非常重要,因为这是React与Vue等其他框架的核心差异所在。

  我画了如下两张图,尝试阐明模板思维与映射思维的不同:

  成都web开发培训:React的世界观及与Vue之比较

  这两种思维的根本分歧在于:视图层与数据层何者第一,何者第二?或者说,是先有html再有js,还是先有js再有html?

  模板思维认为是先有html,再有js。正如上面图的左半部分所示,模板本身已经是一个接近完整的网页了,只不过其中几个变量没法确定,需要一点逻辑来动态填充,所以找了js这么个小弟来打打下手,把这几个变量给补上去。因此,在模板思维的世界观里,html居于主导地位,js服从于html的需要。

  映射思维却相反,认为js里的数据才是第一性的,html只不过是数据层向视图层的单向映射或者说投影,如上图右半部分所示,一个个数据的投影片段拼起来,组成了完整的html。在这个世界观里,数据是本体,视图是现象,他们之间的关系就像一棵树与它的影子一样,要想改变影子,就必须改变树,而不能影子变了树没变。明白了这一点,React那些乍看之下有些奇怪的设定(如阻止input标签直接响应的用户输入),以及React社区对单向数据流的偏好(如Redux),就不难理解了。

  孰优孰劣?

  我可不想像很多文章那样偷懒地来一句“各有优劣”,再不痛不痒地分别列举几个优缺点完事。我,旗帜鲜明地认为,映射思维才是前端未来正确的发展方向。

  在上古时代的网页里,js只是嵌在html里的一行或者一小段脚本,干着弹个提示、飞个广告之类的杂活,远远称不上一个完整的程序,说它是html的小弟或补充,一点问题也没有。但如今,页面越来越复杂,异步加载、动态渲染的开发模式越来越流行,在这种模式下,整个页面都是由js绘制出来的,正是因为js对页面有了完全的掌控权,才使得网页真正进化为“WebApp”,成为一个真正的程序,而不再是一个简单的、无逻辑的类XML标记语言文件,进而使得数据-视图层的分离及其映射关系的建立成为可能。

  在WebApp里,有一个原则显然应该被始终遵守——一致性,即用户看到的DOM元素状态应该与对应的js变量值保持一致。Vue的解决方案是双向绑定,React则实现了单向数据流,这都是从它们各自的世界观出发做出的自然而然的选择。但在我看来,视图=表象,不应该让表象承载实质,否则会导致形实关系的混乱——自然法则允许通过修剪树来改变它的影子,难道也要允许通过改变影子反过来改变树吗?表象就应该是实质的忠实呈现,以及用户触达实质的媒介(事件绑定),不应越俎代庖。

  在模板思维看来,html模板和js数据都是实质,二者是并列的关系;在映射思维的世界观里,js数据是唯一的实质。

  “如无必要,勿增实体”,我选择简单的那个方案。

  事实也是如此,学会了thinking in React,可以在编写复杂页面的时候,仍然保持逻辑清晰和极度舒适。

(责任编辑:范老师)
最新开班
  • 成都Java培训班
    免费试听名额发放中...
  • 成都C++培训班
    免费试听名额发放中...
  • 成都PHP培训班
    免费试听名额发放中...
  • 成都网络工程培训班
    免费试听名额发放中...
  • 成都Unity3D培训班
    免费试听名额发放中...
  • 成都大数据培训班
    免费试听名额发放中...
  • 成都uid培训班
    免费试听名额发放中...
  • 成都会计培训班
    免费试听名额发放中...
  • 成都Python培训班
    免费试听名额发放中...
  • 成都嵌入式培训班
    免费试听名额发放中...
  • 成都web培训班
    免费试听名额发放中...
  • 成都软件测试培训班
    免费试听名额发放中...
在线留言
提交

校区地址:绵阳市涪城区临园路东段68号富临大都会7栋3单元9层12号

联系电话:15023458194

公交路线:富乐路口凯德广场(10路;29路;3路;15路;11路;15a路;71路)

校区地址:成都市锦江区东大街紫东楼端35号明宇金融广场19楼1906室

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市高新区奥克斯广场蜀锦路209号一楼商铺

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都锦江区东大街芷泉街229号东方广场C座3楼303

联系电话:15023458194

公交路线:芷泉街(188路;115路;515路;236路;505路;501路;84路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:成都市武侯区佳灵路3号红牌楼广场2号写字楼11楼1115号

联系电话:15023458194

公交路线:红牌楼东(11路;92路;100路;111路;139路;g28路;快速公交K1/K2) 地铁路线:红牌楼站(地铁3号线)

校区地址:成都市锦江区红星路二段70号四川日报大厦502-2

联系电话:15023458194

公交路线:市二医院站(6路;49路;102路;5路;37路;g92路;) 地铁路线:地铁市二医院(地铁3号线)

校区地址:成都市锦江区东大街芷泉段229号东方广场C座16层

联系电话:15023458194

公交路线:芷泉街(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:东门大桥站(地铁2号线)

校区地址:四川省成都市武侯区高新科技孵化园9号园区E座7楼

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

校区地址:成都市人民南路一段86号“城市之心”大厦26楼

联系电话:15023458194

公交路线:成都市人民南路(6路;14路;42路;72路;76路;1010路;)

校区地址:成都市高新区奥克斯广场B座1708

联系电话:15023458194

公交路线:益州大道锦城大道口(18路;21路;43路;48路;104路;152路;335路 ) 地铁路线:孵化园(地铁1号线)

了解达内动态
关注成都达内教育公众号

首页 | 关于达内 | 课程中心 | 专家师资 | 视频教程 | 学员空间 | 校企合作 | 新闻资讯 | 就业指导 | 网站地图

2016-2025 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56