Elements是最小的React apps构建块。
一个元素描述你在屏幕上想看到的内容。
const element=<h1>Hello,world></h1>;
不像浏览器DOM元素，React元素是一个简单的对象，很容易被创建。React DOM注重更新DOM匹配React 元素。
便签：
人们可能会混淆elements和一个更为熟知的components的概念。我们将会在下一节介绍components.Elements是components组成元素，我们鼓励你读完这节再往前跳。
渲染一个元素到DOM中
在你的HTML文件中某个地方有一个</div>
<div id="root"></div>
我们调用这个“root”DOM节点，因为React DOM管理其中的一切。
使用React构建的应用一般都有一个root DOM节点。如果你集成React到一个已存在的app,你可能有随你喜欢一样多的孤立的roor DOM节点。
渲染一个React元素到一个root DOM节点中，必须把两个都传给ReactDOM.render();
const element=<h1>Hello,world</h1>;
ReactDOM.render(
element,
document.getElementById('root')
);
在CodePen中尝试运行下。
会在页面上展示“Hello World”
更新渲染了的元素
React元素是不变的。一个element一旦创建，便不能改变其子节点或属性。一个element就像一部电影里的一个画面：在某个时间点上描绘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);
在CodePen中尝试运行
每秒中由setInterval()回叫信息执行ReactDOM.render()
便签
实际上，大部分React apps仅执行一次ReactDOM.render()。在接下来的几个小节中，我们将学习这些代码是怎样被压缩在有状态的组件中的,stateful components.
我们建议你不要跳过任何主题因为他们彼此依赖。
React只更新必要的内容
React DOM 对比元素及其子节点和之前的，只适用必要的引起DOM销毁状态的更新部分。
你可以在浏览器中检查上述例子进行验证。
即使我们在每个滴答声创建一个描述整个UI树的元素，内容已变更的文本节点会被React DOM更新。
依我们的经验，思考UI应该怎样在给定的时间查看，而不是怎样随时间改变消除一系列bug
