建立页面
为了使用React，要运用两个类库：React和ReactDOM.React用来创建视图；ReactDOM用来在浏览器中渲染UI。
虚拟DOM
虚拟DOM是由React元素组成的，概念上与HTML元素类似的，不过他们实际上是JavaScript对象。直接访问JavaScript对象要比访问DOM API高效的多。我们可以修改Javascript对象，即虚拟DOM，然后React会通过DOM API尽可能高效地渲染这些变更。
React元素
一个React元素是对实际DOM应该如果表示的具体描述。换句话说，React元素表示应该如何创建浏览器DOM的一组指令。
React.createElement('h1', // 元素名 {id: 'recipe-0', 'data-type': 'title'}, //属性 'Bake Salmon' // 子节点，这里是一个文本);Bake Salmon
复制代码 ReactDOM
用ReactDOM渲染一个React元素。
ReactDom.render(reactElement, document.getElementById('target'))复制代码 使用数据构造元素
React可以将数据和UI元素隔离。
React.createElement( 'ul', // 元素名 {className: 'ingredients'}, // 属性，className代替class表示类名 items.map((ingredient, i) => // item是一个JavaScript数组 React.createElement('li', {key: i}, ingredient); // key可以帮助react高效更新DOM ) // 子节点，这里是一系列React组件
三种创建组件的方法：
- React.createClass
const IngredirentsList = React.createClass({ displayName: 'IngredirentsList', render () { return React.createElement('ul', {className: 'ingredients'}, this.props.items.map((ingredient, i) => React.createElement('li', {key: i}, ingredient);) ) }});ReactDOM.render( React.createElement(IngredirentsList, {items}, null), items是一个包含原料的数组 document.getElementById('target'))复制代码 - React.Component
class IngredientList extends React.Component { renderListItem (ingredient, i) { React.createElement('li', {key: i}, ingredient);) } render { return React.createElement('ul'. {className: 'ingredients'}, this.props.items.map(this.renderListItem) ) }}复制代码 - 无状态函数式组件：是（纯）函数而非对象，没有this作用域
const IngredientList = props => React.createElement('ul', {className: 'ingredients'}, props.items.map((ingredient, i) => { React.createElement('li', {key: i}, ingredient);) }) )复制代码 三种方法适用场景： 1.无状态组件：纯展示组件，只负责展示传入的props，不涉及state 2.createClass: 能用React.Component就别用这个方法了 3.React.Component: 推荐方法。 2、3的区别包括，this的绑定，prop和state配置的不同。
DOM渲染
如果有新DOM需要插入，ReactDOM以最小的代价完成插入，如果数据改变导致页面的修改，那么ReactDOM会更新更改的DOM元素。以确保搞笑的UI重绘。