React学习手册-React运行机制笔记（二）

建立页面

为了使用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' // 子节点，这里是一个文本
);
<h1 data-reactroot id='recipe-0' date-type='title'>Bake Salmon</h1>
复制代码

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
    ) // 子节点，这里是一系列<li>
)
复制代码

React组件

三种创建组件的方法：

1. 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')
)
复制代码

2. 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)
        )
    }
}
复制代码

3. 无状态函数式组件：是（纯）函数而非对象，没有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重绘。