React技术初识

2018-07-26 15:11:06 浏览数 (1)

前端框架哪家强,如果没理解错,应该是React,Angular,VUE。记得去年的时候,和我一个老同学聊天,他是一个架构师,偏向于后端开发,但是发现他已经在入手React技术了,而且做得风风火火,我对React有所耳闻,基本是一句话简介的了解。因为我的重心还不打算在前端做很多投入,所以就只是问问而已,就此作罢。

然后不久听到Facebook因为React开源协议问题,和开源社区吵的沸沸扬扬。国内方面百度等也宣布停止使用React,要求各部门选择新的方案。这件事导致很多公司在评估使用 React 风险和替换成本的时候,发现这件事风险很高。所以技术上的基因是没有问题,但是大海航向靠舵手,开源的方案协议还是很多,选择还是需要做一些参考和对比。

以下是前端专家阮一峰做的一个开源协议的翻译,原文是Paul Bagwell整理的一个列表。

我们来说下React,React 起源于 Facebook 的内部项目,因为对市场上所有 JavaScript MVC 框架都不满意,就决定自己写一套,做出来以后,发现这套东西很好用,就在2013年5月开源了,所以说React技术只是在2013年开放,技术的基因其实要更早一些。

简单来说,既然React是重新构建的一套框架,对市面上的框架不满意,所以换一种理解就会容易很多,React不是一个完整的MVC/MVVM框架,只专注于提供直接的view视图层解决方案,在设计之初就做了裁剪,只专注于组件开发技术,在React中没有控制器,服务,没有指令,也没有过滤器。

React的目标是Minimal API Interface,值提供组件化相关的少量API,实现是很轻量级的。它是为了组件开发而诞生,能够最大限度的简化一个组件的开发。

React可以搭配Flux架构,使用Redux实现。他的一个核心是数据单向流动,也是学习React的一个难点。这个我后续准备也入手学习下。

我不希望大家的第一课就是跑个demo,然后发现对React的原理没有任何理解。所以要提一下,React使用了virtual DOM的技术,这个需要我们好好理解一下,也是学习React的核心。

一般来说,我们知道的大多数前端技术,都是程序直接来改变DOM,DOM通过事件触发来告知程序。

而在React中使用了Virtual DOM,类似于一个缓冲器,使得数据的流程都需要经过Virtual DOM这么一个角色。

这么做有什么意义呢,我们来设想一个场景。

比如有一个列表,我们使用标签<li>来描述。

<li>1</li>

<li>2</li>

<li>3</li>

<li>4</li>

我们需要把DOM结构修改为:

<li>5</li>

<li>6</li>

<li>7</li>

<li>8</li>

<li>9</li>

按照一般的方式,我们需要两类操作,先删除已有的5个元素5~9,然后插入新的元素1~4

这样下来,细粒度的原子操作就是5 4=9次。Virtual DOM的核心算法就是DIFF,通过它来完成最小的操作,来避免频繁的DOM操作。使用Virtual DOM的消耗就是修改4个已有的InnerHTML元素5~8,,然后新增一个元素9

比如下面一个看起来使用相对复杂的操作,如果是这样一个的数据结构,如果使用Virtual DOM这个复杂度就会降低,直接在叶子节点层直接转换(是一个类似append的操作)即可。这也是React的核心DIFF的意义所在,是一种层次化的结构解决方案。

另外React中使用JSX,即JavaScript XML,在实现上会更加专注,但是有一个对于新手来说很复杂的学习路径,那就是整个前端的技术方案实在是太庞大了。

因为浏览器无法识别JSX语法,所以需要另外一个工具来翻译,我们这里可以理解是babel,说到了babel,就需要用ES2016或者ES6的语法了,当然写一些翻译一些还不太方便,于是还有webpark结合babel-loader的方案,然后还可以继续下钻,所以我开始的时候感觉很清爽,但是发现前端的方案实在太多,以至于我觉得陷入了一个巨大的困扰中。

这是前端专家阮一峰在多年前的一个微博表述,前端的技术发展真是太快。

而看看现有的技术矩阵中,新技术和方案真是层出不穷。

我在之前的一篇文章中引用了一个图,如果理解Python web开发技术

现在看来后端对于前端的理解真是越来越少,后端对于前端的一个瓶颈就在于静态页面的基础,现在前端的动态内容如此丰富,这个难度和代沟会变得越来越大。所以前后端技术分离,做成RESTful接口也越来越受到欢迎。

所以我们对待前端技术还是要有一定的前瞻性,另外一个就是尽可能学习成熟快捷的方案,避免重复造轮子,经常返工,对架构进行重构。

0 人点赞