react和react2_出色的React

react和react2

I gave a talk about React at BrazilJS few days ago. The "slides" are here. In this post I'll go over what I said (more or less) at the beginning of the presentation. I hope to follow up with some more code.

几天前，我在BrazilJS上谈论了React。 “幻灯片”在这里。 在这篇文章中，我将介绍演讲开始时所说的(或多或少)。 我希望跟进更多的代码。

Disclaimer: I work at Facebook. But these are my thoughts. In fact, I may have gotten some things wrong. I was in no way involved in building React, these are opinions of a developer trying to build a thing or two with React.

免责声明：我在Facebook工作。 但是这些是我的想法。 实际上，我可能有些错误。 我丝毫没有参与构建React，这些是开发人员试图用React构建一两个东西的意见。

React is a new, open source library from Facebook and Instagram. It's a library for building user interfaces for web applications.

React是来自Facebook和Instagram新的开源库。 它是用于为Web应用程序构建用户界面的库。

主动应用与被动页面 (Active Apps vs. Passive Pages)

It's important to make the distinction between web applications and web pages. This is because React breaks a common best practice - the ever-so-famous separation of concerns: content, presentation, behavior. Pages are mostly content, static HTML content, with some styling from CSS and a bit of JavaScript behaviors here and there - maybe some form validation and other simple modifications of the content.

区分Web应用程序和Web页面很重要。 这是因为React打破了一个通用的最佳实践-众所周知的关注点分离：内容，表示形式和行为。 页面主要是内容，是静态HTML内容，带有CSS样式和一些JavaScript行为，可能还包括某些形式验证和内容的其他简单修改。

The applications are different. The application data and content changes constantly - from user actions, from new data coming from the server or simply with the passage of time.

应用程序是不同的。 应用程序数据和内容不断变化-由用户操作，来自服务器的新数据或随时间推移而变化。

该死的DOM (Damn DOM)

On the web we build web applications using the DOM. Not that we wanted to and not that the DOM was designed for todays applications (after all it has a "document" in the title). It's just something we ended up with. So today we're using DOM and our applications need to keep modifying the DOM all the time, over and over again, to create those rich experiences.

在网络上，我们使用DOM构建Web应用程序。 不是我们想要的，也不是DOM是为当今的应用程序设计的(毕竟它的标题中有一个“文档”)。 这只是我们最终得到的东西。 因此，今天我们正在使用DOM，我们的应用程序需要不断地不断修改DOM，以创建丰富的体验。

And we all have a love/hate relationship with the DOM. On one hand it's easy and familiar and seems to do the job.

而且我们与DOM都有爱恨交织的关系。 一方面，它既简单又熟悉，似乎可以完成任务。

On the other hand the DOM API is verbose. We spend a lot of time just hunting for the nodes we need to modify (like getElementById, getElementsByTagName). Then once we have found the nodes, we start doing cycles of createNode/appendChild to update those nodes.

另一方面，DOM API很冗长。 我们花费大量时间只是在寻找我们需要修改的节点(例如getElementById ， getElementsByTagName )。 然后，一旦找到节点，便开始执行createNode / appendChild循环以更新那些节点。

Also DOM modifications are slow. The browser needs to repaint and reflow, which are costly processes, so we need to be careful when touching the DOM. Often recommended practices are to not read from the DOM all the time, to batch DOM operations and so on.

DOM修改也很慢。 浏览器需要重新绘制和重排，这是昂贵的过程，因此在触摸DOM时我们需要小心。 通常建议的做法是不要一直从DOM中读取内容，而要批处理DOM操作等等。

Then there are the event handlers - you need to make sure you cleanup event handlers attached to nodes you remove, to prevent memory leaks.

然后是事件处理程序-您需要确保清除连接到要删除的节点的事件处理程序，以防止内存泄漏。

This is where React comes in to offer an simpler way of building UIs. React lets you build your application using components that know how to render some data. When data changes, components update automatically in a very efficient way, only where necessary. And all the job of attaching and detaching event handlers is taken care of for you. Also efficiently - using delegation.

这就是React出现的地方，它提供了一种更简单的构建UI的方式。 React使您可以使用知道如何渲染某些数据的组件来构建应用程序。 数据更改时，组件仅在必要时以非常有效的方式自动更新。 附加和分离事件处理程序的所有工作都由您来完成。 也有效-使用委派。

可怕的桌子 (Terrible tables)

Think about the last time you needed to create a table from an array of data.

想一想您上一次需要使用数据数组创建表的时间。

var table = document.createElement('table');
var tr = document.createElement('tr');
var td = document.createElement('td');
var text = document.createTextNode('some data');
td.appendChild(text);
td = document.createElement('td');
text = document.createTextNode('some more data');
td.appendChild(text);
tr.appendChild(td);
table.appendChild(tr);
// .....

Gets pretty annoying pretty quickly.

很快变得很烦人。

And then one the table cells happens to be a link. Oh, man, there we go again...

然后，表格单元恰好是一个链接。 哦，老兄，我们又去了...

createElement('a'), setAttribute('href', 'http://'), createTextNode, append to the link, append to the td, append to the tr...

createElement('a') ， setAttribute('href', 'http://') ， createTextNode ，附加到链接，附加到td ，附加到tr ...

Then a single letter in a single table cell changes. What you're going to do?

然后，单个表格单元格中的单个字母就会更改。 你要做什么？

• Do you keep references to all nodes, to all objects? That's insane.
  您是否保留对所有节点，所有对象的引用？ 太疯狂了
• Do you traverse the table hunting for the node? Gimme the 3rd cell in the 5th row? This would be often inefficient, remember, the DOM is slow.
  您是否遍历该节点的表搜索？ 给我第五行的第三个单元格？ 请记住，这通常效率很低，DOM很慢。
• Do you rebuild the whole table? This is probably the only sane option. It will be inefficient (reflows, repaints of a big chunk of DOM). And what if there were event handlers on the cells? Or an input that user has typed in already.
  您是否重建整个桌子？ 这可能是唯一的理智选择。 这将是低效的(重排，重涂大量DOM)。 而且如果单元上有事件处理程序怎么办？ 或用户已经输入的输入。

In React's case you say:

在React的情况下，您说：

• I have this little component here called Table with Rows and Columns children
  我在这里有一个称为表的行和列子项的小组件
• I have an array of data
  我有一组数据
• Deal with it!
  处理吧！

Then something in the array of data changes? Here's the data, React, my dearest - deal with it.

然后，数据数组中的某些内容发生了变化？ 这是我最亲爱的数据，React，请处理它。

内部思想 (Internal ideas)

So how does exactly React deal with it internally? Two crazy ideas - virtual DOM and synthetic events.

那么React如何在内部处理它呢？ 两个疯狂的想法-虚拟DOM和综合事件。

You define you components in React. It builds a virtual DOM in JavaScript land which is way more efficient. Then it updates the DOM. (And "virtual DOM" is a very big name for what is simply a JavaScript object with nested key-value pairs)

您可以在React中定义组件。 它在JavaScript领域中构建了一个虚拟DOM，效率更高。 然后，它更新DOM。 (“虚拟DOM”是一个非常简单的名称，它只是一个带有嵌套键-值对JavaScript对象)

Data changes. React computes a diff (in JavaScript land, which is, of course, much more efficient) and updates the single table cell that needs to change. React replicates the state of the virtual DOM into the actual DOM only when and where it's necessary. And does it all at once, in most cases in a single tick of the requestAnimationFrame().

数据变化。 React计算一个差异(在JavaScript领域，这当然要高效得多)，并更新需要更改的单个表单元格。 React仅在需要的时间和地点将虚拟DOM的状态复制到实际DOM中。 并一次完成所有操作，在大多数情况下，只需requestAnimationFrame()一下requestAnimationFrame() 。

What about event handlers? They are synthetic. React uses event delegation to listen way at the top of the React tree. So removing a node in the virtual DOM has no effect on the event handling.

那事件处理程序呢？ 它们是合成的。 React使用事件委托在React树的顶部监听方式。 因此，删除虚拟DOM中的节点不会影响事件处理。

The events are automatically cross-browser (they are React events). They are also much closer to W3C than any browser. That means that for example e.target works, no need to look for the event object or checking whether it's e.target or e.srcElement (IE). Bubbling and capturing phases also work cross browser. React also takes the liberty of making some small fixes, e.g. the event <input onChange> fires when you type, not when blur away from the input. And of course, event delegation is used as the most efficient way to handle events. You know that "thou shall use event delegation" is also commonly given advice for making web apps snappy.

这些事件是自动跨浏览器的(它们是React事件)。 它们比任何浏览器都更接近W3C。 这意味着例如e.target可以工作，而无需查找事件对象或检查它是e.target还是e.srcElement (IE)。 冒泡和捕获阶段也可以跨浏览器工作。 React还可以自由地进行一些小的修复，例如， <input onChange>时触发<input onChange>事件，而不是模糊远离输入的事件。 当然，事件委托被用作处理事件的最有效方法。 您知道，“使您应该使用事件委派”通常也可以使Web应用程序变得灵活。

The good thing about the virtual DOM is that it's all in JavaScript land. You build all your UI in JavaScript. Which means it can be rendered on the server side, so you initial view is fast (and any SEO concerns are addressed). Also, if there are especially heavy operations they can be threaded into WebWorkers, which otherwise have no DOM access.

关于虚拟DOM的好处是，所有这些都在JavaScript领域中。 您可以使用JavaScript构建所有UI。 这意味着它可以在服务器端呈现，因此您的初始视图速度很快(并且可以解决所有SEO问题)。 另外，如果有特别繁重的操作，则可以将它们线程化为WebWorkers，否则将无法访问DOM。

精细决赛 (Fine final)

Go check React out. You might like what you see. You can also read some more on "why React" here.

去检查React了。 您可能喜欢您所看到的。 您还可以在此处阅读有关“为什么要使用React”的更多信息。

演示地址

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/remarkable-react/

react和react2