一、简介

核心思想：封装组件、数据驱动
各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。

概念：组件、JSX、Virtual DOM、Data Flow

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

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

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

二、组件

上面的 HelloMessage 就是一个 React 构建的组件，最后一句 render 会把这个组件显示到页面上的某个元素 mountNode 里面，显示的内容就是

Hello John

。

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

三、JSX

JSX语法概念：html模版嵌入JS代码中
使用包含 JSX 的组件，需要通过工具将 JSX 编译输出成 JS 代码才能使用。

JSX OR JS 是可选的：
1、JSX
因为 JSX 最终是输出成 JS 代码来表达的，所以我们可以直接用 React 提供的这些 DOM 构建方法来写模板，比如一个 JSX 写的一个链接：

Hello!

2、JS
上述链接用 JS 代码来写

React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello!')

通过 React.createElement 来构造组件的 DOM 树。第一个参数是标签名，第二个参数是属性对象，第三个参数是子元素。

一个包含子元素的例子：

var child = React.createElement('li', null, 'Text Content');
var root = React.createElement('ul', { className: 'my-list' }, child);
React.render(root, document.body);

对于常见的 HTML 标签，React 已经内置了工厂方法：

var root = React.DOM.ul({ className: 'my-list' },
             React.DOM.li(null, 'Text Content')
           );

四、Virtual DOM

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

React 实现了一个Virtual DOM，组件 DOM 结构就是映射到这个 Virtual DOM 上，React 在这个 Virtual DOM 上实现了一个 diff 算法，当要重新渲染组件的时候，会通过 diff 寻找到要变更的 DOM 节点，再把这个修改更新到浏览器实际的 DOM 节点上，所以实际上不是真的渲染整个 DOM 树。Virtual DOM 是一个纯粹的 JS 数据结构，所以性能会比原生 DOM 快很多。

五、Data Flow

“单向数据绑定”是 React 推崇的一种应用架构的方式。

六、配置

React 组件一般放置在一个 components/ 目录下；
dist 一般做输出文件

【一】React初识