React元素渲染

元素渲染

元素渲染

元素是构成React应用的最小单位。

元素用来描述你在屏幕上看到的内容：

const element=<h1>hello,world!</h1>

与浏览器的DOM元素不同，React当中的元素事实上是普通的对象，ReactDOM可以确保浏览器的数据内容与React元素保持一致。

将元素渲染到DOM中

页面中添加一个id="root"的div:

<div id="root"></div>

在此div中的所有内容都将由ReactDOM来管理，所以我们将其称之为“根”DOM节点。
我们用React开发应用时，一般只会定义一个根节点。但如果你是在一个已有的项目中引用的话，你可能会需要再不同的部分单独定义React根节点。

要将React元素渲染到根DOM节点中，我们通过把它们都传递给ReactDOM.render()的方法来将其渲染到页面上：

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

更新元素渲染

React元素都是immutable不可变的。当元素被创建之后，你是五大改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。

根据我们现阶段了解的有关React知识，更新界面的唯一办法是创建一个新的元素，然后将他们传入ReactDOM。render（方法：

//计时器的例子
function tick(){
    const element =(
        <div>
            <h1>hello,world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}</h2>
        </div>
    );
    React.render(
        element,
        document.getElementById('root')
    );
}

setTimeInterval(tick(),1000);

即便我们美妙都创建了一个描述整个UI树的新元素，React DOM也只会更新渲染文本节点中发生变化的内容。

根据我们以往的经验，将界面视为一个个特定时刻的固定内容（就像一帧一帧的动画），而不是随时处于变化之中（而不是随时处于变化之中的一整段动画），将会有利于我们理清开发思路，减少各种bug。