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>