1.1 React简介
前端UI的本质问题是如何将来源于服务器端的动态数据和用户的交互行为高效地反映到复杂的用户界面上。React另辟蹊径,通过引入虚拟DOM、状态、单向数据流等设计理念,形成以组件为核心,用组件搭建UI的开发模式,理顺了UI的开发过程,完美地将数据、组件状态和UI映射到一起,极大地提高了开发大型Web应用的效率。
React的特点可以归结为以下4点:
(1)声明式的视图层。使用React再也不需要担心数据、状态和视图层交错纵横在一起了。React的视图层是声明式的,基于视图状态声明视图形式。但React的视图层又不同于一般的HTML模板,它采用的是JavaScript(JSX)语法来声明视图层,因此可以在视图层中随意使用各种状态数据。
(2)简单的更新流程。React声明式的视图定义方式有助于简化视图层的更新流程。你只需要定义UI状态,React便会负责把它渲染成最终的UI。当状态数据发生变化时,React也会根据最新的状态渲染出最新的UI。从状态到UI这一单向数据流让React组件的更新流程清晰简洁。
(3)灵活的渲染实现。React并不是把视图直接渲染成最终的终端界面,而是先把它们渲染成虚拟DOM。虚拟DOM只是普通的JavaScript对象,你可以结合其他依赖库把这个对象渲染成不同终端上的UI。例如,使用react-dom在浏览器上渲染,使用Node在服务器端渲染,使用React Native在手机上渲染。本书主要以React在浏览器上的渲染为例介绍React的使用,但你依然可以很容易地把本书的知识应用到React在其他终端的渲染上。
(4)高效的DOM操作。我们已经知道虚拟DOM是普通的JavaScript对象,正是有了虚拟DOM这一隔离层,我们再也不需要直接操作又笨又慢的真实DOM了。想象一下,操作一个JavaScript对象比直接操作一个真实DOM在效率上有多么巨大的提升。而且,基于React优异的差异比较算法,React可以尽量减少虚拟DOM到真实DOM的渲染次数,以及每次渲染需要改变的真实DOM节点数。
虽然React有这么多强大的特性,但它并不是一个MVC框架。从MVC的分层来看,React相对于V这一层,它关注的是如何根据状态创建可复用的UI组件,如何根据组件创建可组合的UI。当应用很复杂时,React依然需要结合其他库(如Redux、MobX等)使用才能发挥最大作用。