React官网（1）—元素渲染

元素渲染

• 元素是React apps中最小的构建块

    一个元素用来描述你想要在屏幕上展示的东西

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

不同于浏览器的DOM元素，React元素是纯粹的对象，并且创建的代价很小。React DOM 通过匹配React元素来更新DOM树。

PS：一个可能会混淆元素概念的更广泛的概念是组件。元素是由组件创造的。

 

•  渲染一个元素放在DOM树里

首先看看HTML文件里的<div>标签

<div id=“root”></div>

我们叫它根DOM结点，因为里面的标签（？）都会被React DOM管理。使用React构造的应用通常只有一个根DOM结点。如果你将React使用在一个已经存在的APP中，可能就会存在多个相互独立的根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>Hello, world!</h1>       <h2>It is {new Date().toLocaleTimeString()}.</h2>     </div>   );   ReactDOM.render(     element,     document.getElementById('root')   ); }   setInterval(tick, 1000);

每秒回调setInterval（）都会重新渲染UI

PS:事实上，大多数的ReactApps只调用ReactDOM.render()一次。所以需要学习如何将元素封装为一个静态的组件。

• React组件只会在必要的时候更新元素

React DOM会和已经存在的DOM比较元素和它的子元素，只有在必要的情况下更新DOM到理想的新状态。

尽管我们创建了一个元素描述整个UI树在每秒是如何显示的，但只有文本节点的内容改变时ReactDOM才会更新。

考虑UI在任意时间点是如何展示而不是怎样根据时间改变它会消除很多不必要的BUG.(考虑结果而不是变化的过程)