07月26, 2016

React 的一些说词

其实很多文章都写 React 的代码,代码可能到 Github 上随意下载然后阅读理解,但是有些说词类的东西还是需要看的,这样能够更好的去理解一个东西。好吧,下面大致“翻译”了一下 《Pro React》这本书的 React‘s Benefits 的部分。^0^ 英文不太好,如果有不一样的地方能理解就好,毕竟不是专业翻译~

(1)让响应式的渲染变得简单

在以前的 Web 开发过程中,也就是在单页应用之前,在用户每一次浏览页面的时候(比如点击一个按钮),都将重新请求一次服务端,即使是页面上一个很小的状态的改变。这是一种糟糕的用户体验,但是在这种多页的情况下,开发者很容易掌控用户访问的页面。

在单页应用的交互中,用户是通过不断的从服务端获取新的数据,然后切换 DOM 的状态。但是随着系统的发展,Web 系统将变得越来越复杂,它将更加难以确定当前应用的状态(其实这里是指局部受影响的部分),以及很难准时的去更新当前交互中的 DOM 状态。

在 React 出现之前,有很多 JavaScript 的框架去解决以上说到的这个问题,然而,这些解决方案都有一些缺陷,比如系统的“可维护性”、“可扩展性”以及“性能”。(其实这里也不尽然,Angular 1.x 也是很优秀的,在此之前)

对比传统的数据绑定来说,响应式的去渲染更加容易(其实这里的容易是体现在开发、维护、测试的阶段上,对于用户来说,体现在性能上吧,因为用户只会感知页面和交互部分)。响应式的编程方式,能够让我们使用声明的方式去控制组件的展现和行为(这里 Vue 作者尤大大说过很多次的声明式编程和命令式编程)。在数据改变的时候,React 的渲染是针对整个接口(这里是指用户接口)的响应。

不过这种开发方式上,由于是每次用户接口引发的状态改变,对于 Web 性能上来说,都会触发 DOM 的重新渲染,这样的代价是很昂贵的,不可行的。React 的解决方案是:通过在内存中解决,构造一套“Virtual DOM”(虚拟节点)的概念,通过很牛逼的 Diff 算法去解决这个问题。

与传统的直接操作 DOM 的方式(比如:jQuery 的方式,不过我觉得只要虚拟 DOM 的标准好了后,jQuery 的方式依然很自由),在内存中操作虚拟 DOM 的性能是很高效的,当应用的状态改变过后(比如在用户的交互中,发起一个 Ajax 的请求,返回新的数据),React 能够快速的对比当前 UI 的状态数据和新的数据之间的不同点(这里说的就是 Diff 算法)然后以最小开销的方式去重新渲染真实 DOM,以上这种方式让 React 的性能很好,更新 DOM 很高效,React 应用能够达到 60fps 的运行帧率,即使是在移动端也是如此。

(2)纯 JavaScript 面向组件的开发模式

在 React 应用中,任何东西都是以组件的方式来表达,这些组件都是独立的,或者是搭积木的方式构建的组件块。开发中使用“分而治之”的方式(叶小钗前辈也说这是一个很重要的软件开发思想),去解决一些复杂问题,因为在 React 的开发方式中,很少会有特别复杂的组件(主要是指结构复杂,状态过多的组件吧,其实一个单页的解决方案要解决的问题就是上面提到的,因为都是在一次用户请求后就开始了所以的用户接口管理工作)。我们开发过程中需要能够让组件粒度保持在一个较小的状态(这样翻译主要是要避免理解成过度组件化的误区),因为组件具有可组合性,能够更容易构建更复杂、更丰富的组件以至于系统(也就是组合的软件方式,但是现在又倾向与 HOC 的开发方式,个人理解,这是一种组件进化的模式,其实从生物学到软件编程领域来说,这种方式相当不错)。

对于 Web 应用来说,React 组件使用纯 JavaScript 的开发模式,而不是传统的通过数据来渲染模版的方式来构建各个 UI。这样做更好的原因在于:模版是限制了你构建 UI 的模式(比如有一套自己的语法),React 也提供了模版语言能够提供的功能,但是这是使用 JavaScript 编程语言的方式来构建你的抽象以及 UI 界面。

除此之外,React 的组件开发模式,让 Web 开发的关注点也发生了改变,由于组件的独立性质,让一个组件就对应了一套界面逻辑(界面+样式+逻辑),而不是传统开发中的关注点在于文件的分离,比如:HTML 关注内容和结构、CSS 关注样式、JavaScript 关注行为。在之前的 Web 开发过程中,之所以要分离文件,是因为页面大多来自于展示和基本的交互。在 React 开发中,你能够更好的关注技术,而不是文件。

React 将展示逻辑和内容高度的耦合,然后以这种方式去封装一个组件,展示 UI,把关注点放在高复用、高扩展的组件开发上。

(3)轻巧、灵活的文档模型抽象

在 React 当中,也对一些东西做了轻量级的抽象(比如事件),这让 Web、IOS、Android 界面都能够使用相同的方式去渲染。(这里就是 React 倡导的思想)

  • 符合标准的事件行为封装,让所有浏览器、设备都自动使用代理的方式绑定事件。
  • React 组件能够进行服务端渲染,这有利于 SEO 和不错的性能。

本文链接:http://www.60sky.com/post/pro-react-get-started.html

-- EOF --

Comments