React 介绍

React 的核心思想是：封装组件。

各个组件维护自己的状态和 UI，当状态变更，重新渲染整个组件。

基于这种方式的直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。

React 大体包含下面这些概念：

组件

JSX

Virtual DOM

Data Flow

这里通过简单的组件来了解这些概念，以及建立起对 React 的总体认识。

import React, { Component } from 'react';
import { render } from 'react-dom';

class HelloMessage extends Component {
  render() {
    return Hello {this.props.name};
  }
}

// 加载组件到 DOM 元素 mountNode
render(, mountNode);

React 历史

React由Facebook 的软件工程师Jordan Walke创建。他受到的HTML组件框架XHP影响。该框架首先于2011年部署于Facebook的 news，随后于2012年部署于Instagram。它于2013年5月在JSConf US开源。

除此之外，React还有React Native框架，可以用JavaScript写原生应用程序。

由于 React的设计思想极其独特，属于革命性创新，出众，逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 案。衍生的 React Native 项目，目标更是宏伟，希望用写 Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

React主要用于构建UI。你可以在React里传递多种类型的参数，如声明，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。

组件

React 应用都是构建在组件之上。

上面的 HelloMessage 就是 React 构建的组件，最后一句 render 会把这个组件到上的某个元素 mountNode 里面，的就是 <div>Hello John</div>。

props 是组件包含的两个核心概念之一，另是 state（这个组件没用到）。可以把 props 看作是组件的配置，在组件内部是不变的，只是在这个组件的时候传入不同的（比如这里的 name）来定制这个组件。

JSX

从上面的可以看到将 HTML 直接嵌入了 JS 里面，这个就是 React 提出的一种叫 JSX 的语法，这应该是最开始接触 React 最不能接受的设定之一，因为前端被“表现和逻辑层分离”这种思想“洗脑”太久了。但实际上组件的 HTML 是组成组件不可分割的一部分，能够将 HTML 封装起来才是组件的完全体，React 发明了 JSX 让 JS 嵌入 HTML 不得不说是一种非常聪明的做法，让前端实现真正意义上的组件化成为了可能。

好消息是你可以不一定使用这种语法，后面会进一步介绍 JSX，到时候你可能就会喜欢上了。现在要知道的是，要使用包含 JSX 的组件，是需要“编译” JS 才能使用的，之后就会讲到开发环境。

Virtual DOM

当组件状态 state 有更改的时候，React 会组件的 render 重新渲染整个组件的 UI。

当然如果真的这样大面积的操作 DOM，会是很大的问题，所以 React 实现了Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 个 Virtual DOM 上实现了 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。这个 Virtual DOM 是纯粹的 JS 数据结构，所以会比原生 DOM 快很多。

Data Flow

“单向数据绑定”是 React 推崇的一种应用架构的方式。当应用足够复杂时才能体会到它的好处，虽然在一般应用场景下你可能不会意识到它的存在，也不会影响你开始使用 React，你只要先知道有这么个概念。