React.js 官网资料摘记：元素渲染

元素渲染

将元素渲染到DOM中

假设定义了一个根节点，在这个根节点内部使用React渲染元素：

<div id='root'></div>

那么一般情况下，会把该节点称为：根DOM节点，并把该节点所有内容都交给ReactDOM来进行管理，渲染该节点的方式就是：

ReactDOM.render(
    <h1>Hello World !</h1>,
    document.getElementById('root')
)

更新元素渲染

React元素被创建出来后都是不可变的，如你创建下面这么一个input的输入框：

ReactDOM.render(
    <input value='有本事你就删除这个内容啊'/>,
    document.getElementById('root')
);

这么一个input的元素被渲染进页面后，按理来说你应该是可以像操作一般input一样对其进行操作，但是由于你指定了value属性，所以你无法对输入框内部的内容进行修改，感觉略坑。官网上给出了一个计时器的例子，感觉蛮好的，在这里贴一下：

function tick(){
    const element=(
        <div>
            <h1>定时器显示：</h1>
            <h2>{new Date().toLocaleTimeString()}</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    );
}
setInterval(tick,1000);

这里采用了定时执行tick函数，并在函数内部使用React渲染新的结果。

React只会更新必要的部分

例如上面那个例子中，React只会更新
<h2>{new Date().toLocalTimeString()}</h2>
，而不会更新上面的
<h1>定时器显示：</h1>