React与前端:React家族介绍

  1. 云栖社区>
  2. 博客>
  3. 正文

React与前端:React家族介绍

博文视点 2018-08-29 14:02:14 浏览1307
展开阅读全文

我曾在微博上说过“React就是哪吒”,那么一个前端框架和哪吒有什么关系呢?其实我觉得二者有某些相似的地方。

哪吒家室显赫,拥有的神器多到需要三头六臂才能拿得过来,后来经历磨难,脱胎换骨,能够独当多面。

React源自Facebook,集多项特色于一身——组件化、声明式、虚拟DOM、局部更新、状态机等,React 16引入的Fiber架构更可谓脱胎换骨,得Flux、Redux、immutable.js、React Router助阵,如虎添翼。

随着React Native的出世和React Canvas的诞生,更是让React如同有了三头六臂一般,将传统前端突破到安卓端、iOS端,大有一统全端的趋势。

目前三大框架Angular、React、Vue.js逐鹿中原,无论谁主沉浮,我都相信能“革了React命”的一定不是React的仿制品。

如果你对上面提到的这些名词不是特别了解,建议你阅读本文后续的内容,本文将介绍前端的历史和React相关知识。

React与前端:React家族介绍

1 前端简史

在没有Web时,信息的传递不太容易,得发明一种工具,让信息的创造者和阅读者都能看到一样的东西,于是Web诞生了。

1.1 Web 1.0

Web的内容由网站制作者生成,家族介绍用户只能浏览内容,信息的流动方向只能从服务端到客户端,这一阶段被称为Web 1.0时代。有人说这个时代的Web是静态的,这一阶段主要涉及的技术是HTML、CSS、JavaScript。

如果一段文字没有标点,那就不太容易阅读,标点其实是一种数据结构,数据必须有结构承载才能更容易传递。在Web中,HTML就是数据的结构,比如标题、段落、强调、表格等,现在我们称其为语义化。

因为视觉是Web的主要传播途径,除了结构,视觉也是一种信息,CSS成为视觉信息的载体,有HTML和CSS已经可以制作出页面了。由于HTML中大量使用div标签,HTML+CSS也被称作DIV+CSS。

光有视觉页面还是不够的,页面还要能和用户交互,比如点击按钮要有弹窗,JavaScript正是用来做这部分工作的,被称为行为。至此,Web三要素,结构、表现和行为就全了,分别对应HTML、CSS和JavaScript。

HTML、CSS和JavaScript要分离,一直被视为前端的金科玉律,CSS选择器成为连接HTML和CSS的纽带,而DOM成为HTML和JavaScript的桥梁,CSSOM承担了JavaScript和CSS的媒介。

1.2 Web 2.0

Web的内容主要由用户生成,用户浏览其他用户创造的内容,这一阶段统称为Web 2.0时代。这一阶段涉及的技术繁多。

服务器语言和表单的发明,第一次让信息可以从客户端流向服务端,账号体系把用户从屏幕前搬到了Web上,这一阶段的技术栈没啥变化,JavaScript也只是作为玩具语言,用来验证表单,前端开发者都被称作美工。

2006年谷歌推出了Gmail,可以不用刷新完成各种操作,其媲美客户端的体验,也将Web 2.0推上了浪潮之巅。

一种被称为AJAX的名词被发明——页面需要更新,JavaScript向服务器发起请求,服务端不再返回页面,而是返回XML格式的数据,然后JavaScript将数据渲染到页面中——最开始采用的是拼接字符串的形式,后来发明了前端模版,比如template.js。

这一阶段涌现了大批技术,如prototype.js、Dojo、ExtJS、jQuery,其巅峰是YUI 3。这些工具各有各的优点,其中jQuery可以作为代表,其主要功能是抹平浏览器差异,简化DOM操作。

JavaScript代码规模越来越大,一个JavaScript文件已经不能适应现状了,需要拆分成多个JavaScript文件(分治思想),代码之间存在依赖关系,且依赖关系越来越复杂,为此社区进行了各种尝试来解决这个问题,比如采用AMD、CMD、CommonJS。2015年ECMAScript 6定稿,带来了原生的模块系统,这一问题才最终被解决。

随着项目工程越来越大,代码的组织结构是不是也需要复用?有人将后端的MVC模式带到前端,但MVC并不适合前端,因此前端做了适当改变,诞生了MVP、MVVM等框架,典型的有Backbone.js、Knockout、AngularJS等。

2013年发布的React,将一种全新的思路带到了我们面前,一个新的时代已经来了。

2 React是什么

传说Facebook的大神们,对现有的框架都不满意,于是有了React。React是前端一个用于构建用户界面的 JavaScript 库,和其他MVC库不一样的地方是,React仅仅涉及界面层,类似于MVC中的View。

React是一次完整的抽象,改变了我们思考、设计和写代码的方式;React是一次完整的统一,统一了以前很多种编写界面的方式。原生前端实现界面太过灵活,基本上团队里每个人都有自己的一套方法,而React是一套非常优雅的方法论,我们苦苦追寻了多年的最佳思想,竟然都在React里了。

React有三个特色,分别是声明式、基于组件和一次学习,多端受用。

2.1 声明式

React改变了也统一了界面的实现方式,在React中,将界面抽象为状态和视图,只需定义好每个状态对应的视图就行了,剩下的React会帮你搞定,比如状态改变时会自动刷新视图等。

下面代码中的flag如果发生变化,界面会自动刷新。

React与前端:React家族介绍

2.2 基于组件

React改变了写前端的习惯,在React的世界里一切都是组件,以前的入口在HTML,现在的入口在JavaScript;以前是HTML + CSS + JavaScript的组合,现在是JavaScript+ CSS的组合;以前要想复用功能得拷贝三处代码,现在仅需引用一个组件即可。来看一个组件的例子。

React与前端:React家族介绍

上面的代码中包含两种组件,一种是HTML标签组件,另一种是React组件,其区别是HTML标签以小写字母开头,React组件以大写字母开头。

2.3 一次学习,多端受用

React中抽象了一层虚拟DOM,所以我们可以频繁地修改状态,但是更改的都是虚拟DOM。当虚拟DOM发生变化后,会集中更新到真实DOM,因为虚拟DOM的存在,只要替换掉底层的渲染引擎,就可以突破浏览器了。React Native就是将React实现到了原生App,React的一切都在,但是底层却不是DOM了,而是原生的View。类似的还有服务端渲染,这也是本书主要讲的内容。理解了React的思想,就可以搞定Web和App,简直不能再棒了。

3 React家族

React只是视图层,React家族还有一些其他成员,本节来简单介绍一下。

3.1 React Router

传统Web都是多页面的,每个页面一个URL,页面之间通过超链接跳转,由浏览器负责管理页面的跳转、前进、后退等功能,通过指定URL可以直接跳转到指定页面。

比如有一个首页和一个文章页,此时首页是一个URL,文章页是一个URL,可以从首页跳转到文章页,然后再从文章页跳转到首页,这一切都由浏览器完成。

React与前端:React家族介绍

传统页面刷新跳转的方式,体验不是很友好,于是更友好的单页面应用来了,也被称为WebApp。在这种模式下整个应用只有一个传统的页面,传统模式下的多个页面被抽象成一个个视图,原来的页面跳转,此时由JavaScript负责切换视图;原来向后端请求整个页面,现在变成向后端请求数据接口,因为不需要刷新页面,体验非常好。

但这种方式有一个问题,就是除了首页,其他页面是无法直接到达的,也就是每次都要先进到首页;为了能够实现传统Web那种URL的优点,需要在前端模拟一套路由,有了路由就可以通过URL直接进入某个视图了。

React非常适合做单页应用,React Router就是专门为React定制的路由,对React非常友好。下面看一下使用React Router实现上面首页和文章页跳转的情况。

React与前端:React家族介绍

3.2 Redux

面向界面的编程可以分为三部分:界面、数据和数据操作。React对界面的抽象做到了极致,但对数据和数据操作几乎没有约束,我们可以把这部分写到React组件中,也可以抽出来,将界面和数据与对数据操作进行分离,这就是Redux的工作。

Redux是JavaScript的状态容器,提供可预测化的状态管理,Redux因React而生,但也可以与其他类库配合使用。

3.3 React Native

React Native是一套披着React外衣的原生控件,React Native将原生控件封装为跨平台的React组件,并赋予我们通过JavaScript调用原生控件的能力。

在React Native里没有CSS,但React Native让我们可以通过CSS的语法来设置原生控件的属性。下面是一个例子。

React与前端:React家族介绍

可以看到,React Native就是用React语法封装过的原生控件,用CSS语法设置控件属性。


本文选自《React状态管理与同构实战》一书,作者侯策、颜海镜,由电子工业出版社2018年8月出版。

8da876a33c8c6c6e40d039b67ffa9c3334f0bd57

React自开源以来,便以革命性的设计理念迅速颠覆了前端开发的传统意义,其倡导的组件化、状态管理、虚拟DOM等思想极大提高了前端开发效率。为了更加高效地维护React应用的数据状态,以Redux为代表的数据管理模式横空出世。

本书以React技术栈为核心,在介绍React用法的基础上,从源码层面分析了Redux思想,同时着重介绍了服务端渲染和同构应用的架构模式。书中包含许多项目实例,不仅为用户打开了React技术栈的大门,更能提升读者对前沿领域的整体认知。主要适合具有一定JavaScript基础的前端工程师,以及对前端开发感兴趣的相关从业人员阅读。

图书详情:京东当当亚马逊

网友评论

登录后评论
0/500
评论
博文视点
+ 关注