React中文文档之Rendering Elements
2016-11-17 22:49
357 查看
Rendering Elements - 渲染元素
元素是React应用的最小构建块
一个元素描述了你想要在屏幕上看到的内容:
不同于浏览器的DOM元素,React元素是普通对象,而且易于创建。React DOM很小心将React元素更新为匹配的DOM对象。
注意:
人们可能将元素与一个广为人知的概念"组件"混淆。在下一节我们将介绍组件。元素是组件的组成部分,在跳跃着阅读时,我们鼓励你阅读本节。
Rendering an Element into the DOM - 渲染一个元素为DOM
在你的HTML文件某处,有一个 '<div>':
我们称这个为一个 'root' DOM节点,因为在它内部的任何内容,都将会被 'React DOM' 来管理。
只通过React构建的应用,经常有一个单个的根DOM节点。如果你正在将React和一个已经存在的应用相融合,你可以设置多个孤立的根DOM节点。
为了渲染一个React元素到一个根DOM节点,将2者都传递给 'ReactDOM.rend()':
在页面上显示 'Hello, world'.
Updating the Rendered Element - 更新渲染过的元素
React元素时不可改变的。一旦你创建一个元素,你不能改变它的子或者属性。一个元素就像电影中单独的一帧:代表一个时间点的UI。
以目前我们学到的知识,更新UI的唯一方式是创建一个新的元素,并且传递给 'ReactDOM.render()'。
思考时钟的例子:
利用 setInterval() 的回调函数,每秒调用 'ReactDOM.rend()' 一次。
注意:
实际上,大多数React应用仅仅调用 'ReactDOM.rend()' 一次。在下个章节我们将学习如何将这样的代码封装到有状态的组件中。
我们推荐你不要跳过这些主题,因为它们相互关联。
React Only Updates What's Necessary - React仅执行必需的更新
React DOM 将元素和它的子与之前的元素和子进行比较,仅更新必需更新的地方,来让DOM达到它期望的状态。
你可以通过使用浏览器工具检查最后一个例子来核实。
这里是文档里的firebug动态截图。
即使在每秒,我们创建了一个元素,来描述整个UI树,也仅仅只有内部的文本节点通过React DOM被更新。
以我们的经验,思考任何给定时刻UI应该看起来像什么,而不是随着时间它是如何改变的,消除了一整类型的bug。(这就是React真正的内在)
元素是React应用的最小构建块
一个元素描述了你想要在屏幕上看到的内容:
const element = <h1>Hello, world</h1>;
不同于浏览器的DOM元素,React元素是普通对象,而且易于创建。React DOM很小心将React元素更新为匹配的DOM对象。
注意:
人们可能将元素与一个广为人知的概念"组件"混淆。在下一节我们将介绍组件。元素是组件的组成部分,在跳跃着阅读时,我们鼓励你阅读本节。
Rendering an Element into the DOM - 渲染一个元素为DOM
在你的HTML文件某处,有一个 '<div>':
<div id="root"></div>
我们称这个为一个 'root' DOM节点,因为在它内部的任何内容,都将会被 'React DOM' 来管理。
只通过React构建的应用,经常有一个单个的根DOM节点。如果你正在将React和一个已经存在的应用相融合,你可以设置多个孤立的根DOM节点。
为了渲染一个React元素到一个根DOM节点,将2者都传递给 'ReactDOM.rend()':
const element = <h1>Hello, world</h1>;
ReactDOM.render(
element,
document.getElementById('root');
);
在页面上显示 'Hello, world'.
Updating the Rendered Element - 更新渲染过的元素
React元素时不可改变的。一旦你创建一个元素,你不能改变它的子或者属性。一个元素就像电影中单独的一帧:代表一个时间点的UI。
以目前我们学到的知识,更新UI的唯一方式是创建一个新的元素,并且传递给 'ReactDOM.render()'。
思考时钟的例子:
function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Data().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root'); ); } setInterval(tick, 1000);
利用 setInterval() 的回调函数,每秒调用 'ReactDOM.rend()' 一次。
注意:
实际上,大多数React应用仅仅调用 'ReactDOM.rend()' 一次。在下个章节我们将学习如何将这样的代码封装到有状态的组件中。
我们推荐你不要跳过这些主题,因为它们相互关联。
React Only Updates What's Necessary - React仅执行必需的更新
React DOM 将元素和它的子与之前的元素和子进行比较,仅更新必需更新的地方,来让DOM达到它期望的状态。
你可以通过使用浏览器工具检查最后一个例子来核实。
这里是文档里的firebug动态截图。
即使在每秒,我们创建了一个元素,来描述整个UI树,也仅仅只有内部的文本节点通过React DOM被更新。
以我们的经验,思考任何给定时刻UI应该看起来像什么,而不是随着时间它是如何改变的,消除了一整类型的bug。(这就是React真正的内在)
相关文章推荐
- React官方文档--Rendering Elements
- Reactjs入门官方文档(二)【rendering-elements】
- React-navigation 官方文档中文翻译(三) Configuring the Header
- React中文文档之Lists and Keys
- React-navigation 官方文档中文翻译(四) intro to Navigators
- React中文文档之Forms
- React Starter Kit 中文文档
- React-navigation 官方文档中文翻译(一) Hello Mobile Navigation
- React中文文档之Lifting State Up
- React初学者教程(说明文档)--中文翻译
- React中文教程翻译文档 - JSX Syntax(语法)
- React-navigation 官方文档中文翻译(一) Hello Mobile Navigation
- React中文文档之Composition vs Inheritance
- React中文文档之Thinking in React
- React中文文档之Components and Props
- React-bootstrap 中文文档
- React-navigation 官方文档中文翻译(二) Nesting Navigators
- Reactjs入门官方文档(六)【conditional-rendering】
- react-02--Rendering Elements
- React中文文档之Hello world翻译