React文档（四）渲染元素

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

一个React元素描述了你在屏幕上所看到的东西：

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

和浏览器页面中的DOM元素不同，React元素是普通的对象，创建起来很方便。React DOM负责处理根据React元素来更新DOM。

笔记：

你也许会困惑元素和另外一个广为人知的概念“组件”有什么区别。我们会在下一章节介绍组件。组件由元素组成，我们建议你看完本章节再看下一章节。

渲染React元素到DOM

让我们假设有一个<div>元素在你的HTML页面里：

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

我们把这个div叫做根节点因为在这个div里的所有元素都由React DOM管理。

如果只使用React创建应用通常只有一个根节点。如果你将React整合进一个已经存在的应用，可能会存在很多彼此隔离的根节点。

将一个React元素渲染到根节点里，通过ReactDOM.render()：

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

ReactDOM.render(

  element,

  document.getElementById('root')

);

在CodePen里试一试。

它会在页面上显示 “Hello World”。

更新已经渲染的元素

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);

在CodePen中试一试。

它利用setInterval()定时器的回调每一秒都会调用一次ReactDOM.render()来更新DOM。

笔记：

在实际使用的时候，大多数React应用只调用一次ReactDOM.render()一次。下一章节我们会学习这些代码如何被包裹在有状态的组件之中。

建议不要跳章节学习因为知识点彼此关联。

React只更新必要的东西

React DOM会将元素和子元素与之前的状态比较，然后只更新必要的部分使DOM变为所希望的状态。

你可以通过检查浏览器开发者工具来验证刚才那个例子：

即使每一秒我们都会重新新建整个UI树，但是只有时间那个文本节点被React DOM更新。

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

巴特西

React文档（四）渲染元素

最新文章

热门文章