【译】渲染Elements

LoftySoul 发布于2019-08-20 14:29 / 1815人阅读

摘要：注不做翻译是中最小的构建部件。在里渲染让我们看一下在下面有在你文件中无处不在的标签我们会把这元素成为元素因为的所有东西都会放在这个元素里面。通过方法，我们能吧渲染到我们根节点上。更新被渲染的是不可变的。

下面是react官方文档的个人翻译，如有翻译错误，请多多指出
原文地址：https://facebook.github.io/re...
特别感谢Hevaen，同时也向豪大React群所有成员表示感谢，从你们身上我学到很多。
注： Elements 不做翻译

Elements are the smallest building blocks of React apps.

Elements 是React apps 中最小的构建部件。

An element describes what you want to see on the screen:

一个element描述你所希望呈现的样子：

const element = Hello, world

Unlike browser DOM elements, React elements are plain objects, and are cheap to create.

不同于浏览器的dom elements, react elements 只是一个对象并且相对于创建浏览器dom来说，创建react elements是非常廉价的。

React DOM takes care of updating the DOM to match the React elements.

React DOM 只需要更新dom到对应的React elements 上。

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.

注意：
一个令人困惑的地方，elements 跟更广为人知的“components" 让人混淆。我们将会在下一节介绍components。 Elements 是由 components 组成的。我们鼓励你先跳过这一章。

Rendering an Element into the DOM

在DOM里渲染element

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元素成为root元素因为React的所有东西都会放在这个元素里面。

Applications built with just React usually have a single root DOM node.
通常只用react来写的应用只有一个root 的dom节点

If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.

如果你打算把react整合到你现在的App里，你可能尽可能的分离多个root节点。

To render a React element into a root DOM node, pass both to ReactDOM.render():

通过ReactDOM.render() 方法，我们能吧react渲染到我们根节点上。

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

Try it on CodePen.

It displays "Hello World" on the page.

这个页面将会显示"Hello World"。

Updating the Rendered Element

更新被渲染的element

React elements are immutable.
react elements 是不可变的。

Once you create an element, you can"t change its children or attributes.

当你创建一个element的时候，你不能改变它们的子元素或者属性

An element is like a single frame in a movie: it represents the UI at a certain point in time.

一个element就像是一个多带带的帧在电影里：这意味着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的方式是创建一个新的element并且传进给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);

打开试试

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 应用只会调用一次ReactDOM.render()。在下一张，我们将会学习如何把代码封装到 stateful components中
我们希望你别跳过提示因为他们被实践在许多地方

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 会把element 当前的值，包括他的children ,与之前的值进行比较，并且只会进行必要的更新。

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.

尽管我们在每一秒通过创建一个element来描述整个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。

云服务器 GPU云服务器 Elements linux下编译阿里 linux下编译运行 Linux下编译webrtc

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/81672.html

【译】组件与Props

摘要：调用组件，并且把作为传递进去。警告组件的名字最好都是大写字母开头的。举个例子，表示一个标签，但表示一个组件并且要求是一个闭合标签。组件能引用他们的组件作为他们的输出。警告组件必须返回一个根组件。让我们把这个组件切割成更小的组件。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Components ...

Juven 2019-08-20 14:34 评论0 收藏0
【译】介绍JSX

摘要：介绍我们来看一下下面的变量声明这是有意思的标记语法既不是字符串又不是。也是一个表达式编译后表达式成为常规的对象。防止注入攻击中直接嵌套用户在表单表单中输入的值是安全的。这有助于防止攻击跨站脚本。读取这些对象并使用它们构造并保持更新。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re...特别感谢Hevaen...

ymyang 2019-08-19 18:46 评论0 收藏0
【译】Handling Events

摘要：如果你使用实验性属性初始化语法，你能用这方法来正确绑定回调函数的绑定这语法在中默认支持。然而，如果这回调函数是作为一个传递到更下一级的组件中的时候，些组件可能会做一个额外的重新渲染。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Handling events with React element...

sugarmo 2019-08-20 14:47 评论0 收藏0
[译]React 元素 vs React 组件 vs 组件支撑实例

摘要：元素和组件实例都不表示真实元素。我希望这篇文章能够帮助你理清这些术语参考资料翻译成支撑实例来自于理解中方法创建组件的声明式编程和命令式编程的比较对循环提示增加的研究精髓之一算法本篇为译文，原文出处：React Elements vs React Components vs Component Backing Instances 许多人可能听说过 Facebook 的 React 库，...

gnehc 2019-08-20 16:02 评论0 收藏0
[译]关于Polymer 2.0

摘要：好久没有更新系列文章了，今天去官网一看也出来了。也在以下几处实现上进行了改进改进了与第三方库的协同工作能力。移除了这个作用是在中用来作为。使用了更加简单方便的方式来处理和第三方库的关系。这次升级的主要目标之一就是数据系统的改进。好久没有更新polymer系列文章了，今天去官网一看2.0 preview也出来了。这几天项目正好不紧，有大量的空闲时间，不如就翻译一下这篇关于Polymer...

lixiang 2019-08-21 14:53 评论0 收藏0