react-02－－Rendering Elements

Rendering Elements

元素是React apps里最小的构建块。

一个元素描述了你想在屏幕上看到的。

const element = <h1>Hello ,World</h1>

不像浏览器的DOM元素，React元素是平实无华的，很容易创建。React DOM 关注更新DOM区匹配React元素。

渲染一个元素到DOM

在你的HTML文件里写这样一个div;

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

我们把它叫做根DOM节点，因为在它里面的一切东西都被React DOM管理。

用React建立应用，通常有一个根节点，如果你正在把React 整合到一个存在的app中，你可能有很多隔离的根节点。

为了渲染一个 React 元素进入一个根节点，通过  ReactDOM.render():

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

更新渲染元素

React 元素是不可改变的。一旦你创建了一个元素，你不可能改变它的孩子或者属性。

一个元素在一个电影中就像一个单独的框架，它展现了在某个时间点的UI;

由于我们目前的知识，这唯一的改变UI的方法就是创建就是创建一个新的元素，并且去渲染它；

考虑这个时钟例子：

function tick() {
    const element = (
        <div>
            <h1>Hello,world!</h1>
            <h2>It is {new Date().toLocaleString()}.</h2>
        </div>
    );
    ReactDOM.render(
        element,
        document.getElementById('root')
    )
}
setInterval(tick,100);

它每秒渲染一次通过setInterval里的回调函数tick；

⚠️ 在练习中，大部分React apps只调用一次ReactDOM.render()。在下部分，我们将学习如何使代码包裹进状态组件里。