react笔记05

元素渲染

元素是构成React应用的最小砖块

元素描述了你在屏幕上想看到的内容。
const element = <h1>hello,world</h1>;
与浏览器的DOM元素不同，React元素是创建开销极小的普通对象。React DOM会负责更新DOM来与React元素保持一致。

注：组件是由元素构成的，二者不应混淆

将一个元素渲染为DOM

假设你的HTML文件某处有一个<div>:
<div id="root"></div>
我们将其称为"根"DOM节点，因为该节点内的所有内容都将由React DOM管理。
仅使用React构建的应用通常只有单一的根DOM节点。如果你在将React集成进一个已有应用，那么你可以在应用中包含任意多的独立根DOM节点。
想要将一个React元素渲染到根DOM节点中，只需把它们一起传入 ReactDOM.render():

const element = <h1>hello,world</h1>;
ReactDOM.render(element,document.getElementById('root'));

更新已渲染的元素

React元素是不可变对象。一旦被创建，你就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的UI。
根据我们已有的知识，更新UI唯一的方式是创建一个全新的元素，并将其传入ReactDOM.render()。
计时器的例子

function tick() {
    const element = (
        <div>
            <h1>111</h1>
            <h2>it is {new Date().toLocaleTimeString()}.</h2>
        </div>
    );
    ReactDOM.render(element,document.getElementById('root'))
}
setInterval(tick,1000)

这个例子会在setInterval()回调函数，每秒都调用ReactDOM.render()。

React只更新它需要更新的部分

React DOM会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使DOM达到预期的状态。
以上一个例子来说，尽管每一秒我们都会新建一个描述整个UI树的元素，React DOM只会更新实际改变了的内容，也就是例子中的文本节点。

标签：React,render,DOM,元素,笔记,element,react,05,ReactDOM
来源： https://www.cnblogs.com/wxhDaydream/p/16443737.html