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 等）使用才能发挥最大作用。