翻译练习 react-Rendering Elements

Rendering Elements
渲染组件

Elements are the smallest building blocks of React apps.
组件是react app 最简单的基石

An element describes what you want to see on the screen:
一个组件描述了你想要在屏幕上看到什么

const element = 
Hello, world
;

Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
和浏览器dom元素不同的是，react 组件是普通的object并且非常容易创建，react dom会负责dom节点的更新与react 组件保持一致

Note:
One might confuse elements with a more widely known concept of “components”. We will introduce components in the next section. Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.
注意：
你可能会把元素和各种已知组件概念弄混，我门将在下一章介绍组件，组件是由元素组成的，并且我们建议你跳到下一章之前先阅读此章节

Rendering an Element into the DOM
将一个元素渲染为dom

Let’s say there is a

somewhere in your HTML file:
现在在你的html文件中写一个div

We call this a “root” DOM node because everything inside it will be managed by React DOM.
我们称它是一个跟Dom节点，因为我们通过React dom管理的任何元素都会在这个里面

Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
react应用构建一般来说仅仅需要一个根Dom节点。如果你想整合react到已存在的app中，你可以根据你的需要创造多个独立的根节点

To render a React element into a root DOM node, pass both to ReactDOM.render():
想要在一个根节点内渲染一个react组件，通过调用ReactDOM。render（）

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

Try it on CodePen
在codePen中尝试一下

It displays “Hello, world” on the page.
它建在页面中展示“hello world”

Updating the Rendered Element
更新渲染的元素

React elements are immutable. Once you create an element, you can’t change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
react 元素是不可改变的，一旦你创造了一个元素，你不能改变它的子元素或者属性。一个原始就像电影里面的一幕。它展示当前时间点的ui

With our knowledge so far, the only way to update the UI is to create a new element, and pass it to ReactDOM.render().
根据目前我们所学的知识，创造新的一个元素是更新ui的唯一一种方式，并将它传入到ReactDOM。render中调用

Consider this ticking clock example
思考下面这个秒表的例子

function tick() {
  const element = (
    

      
Hello, world!
      
It is {new Date().toLocaleTimeString()}.
    
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

Try it on CodePen
在CodePen中尝试

It calls ReactDOM.render() every second from a setInterval() callback.
它通过setInterval（）的回调函数中每秒调用一次ReactDOM。render（）

Note:
In practice, most React apps only call ReactDOM.render() once. In the next sections we will learn how such code gets encapsulated into stateful components.
We recommend that you don’t skip topics because they build on each other.
注意：
在实践中，react app 通常只会调用一次ReactDOM。render（）一次，在下一个章节，我门将学习如何将这样的代码封装到状态化的组件中去
我门 推荐 你不要跳跃的去阅读，因为它们都是互相紧密联系的

React Only Updates What’s Necessary
react 仅仅更新需要的东西

React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
React dom 会比较当前元素和它的子元素和之前的区别，并且仅仅只会更新必要的dom去达到想要的状态

You can verify by inspecting the last example with the browser tools:
你可以通过浏览器工具检查最后一个例子去证实这个说法

Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
尽管我们在每一秒创建了一个元素描述整个ui树，但是React DOM 的更新 仅仅改变了文本节点的内容

In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
根据我们以往的经验，考虑ui在任意时刻的状态，而不是随着时间的改变而改变，会减少许多bug