前端 优化反应： 虚拟dom解释

时间  2019-11-12
标签 前端 优化 反应 虚拟 dom 解释 栏目 HTML 繁體版
原文   原文链接

了解反应的虚拟dom，并使用此知识加快应用程序。在这个全面入门的框架内部入门中，咱们将揭开JSX的神秘化，让您展现如何作出反应，解释如何找到瓶颈，并分享一些避免常见错误的提示。javascript

反应的缘由之一一直动摇着前端世界，并无降低的迹象，它平易近人的学习曲线：在你绕着头后，学习曲线。n.JSX还有整个“国家vs.道具“概念，你能够走了。html

若是你已经熟悉了反应工做的方式，你能够直接跳到“修理东西”.前端

可是要真正掌握本身的反应，你须要思考反应。这篇文章是想帮你解决这个问题。看看所作的反应表咱们的项目之一:java

A huge React table

一个巨大的反应表ebay业务.react

使用数百条动态的、多层的行，理解框架的细点对于保证用户体验的顺利进行相当重要。git

当事情发生的时候你确定会感受到。输入字段会获得laggy，复选框会先检查一下，情态动词会出现困难的时候。github

为了解决这些问题，咱们须要覆盖整个旅程，一个反应组件从定义到您定义(而后更新)页面上。系好安全带！web

在JSX后面

过程当中已知的前端圈为“transpiling”，即便“编译”将是一个更正确的术语。算法

反应开发人员敦促您在编写组件时使用名为JSX的html和javascript组合。然而，浏览器对于JSX及其语法没有任何线索。浏览器只理解简单javascript，因此必须将JSX转换成它。下面是一个div它有一个类和一些内容：chrome

<div className='cn'>
  Content!
</div>

“正式”javascript中的相同代码只是一个带有若干参数的函数调用：

React.createElement(
  'div',
  { className: 'cn' },
  'Content!'
);

让咱们仔细看看这些论点。二是一个元素类型。对于html标记，它将是一个带有标记名的字符串。第二个参数是一个对象，它包含全部元素属性。若是没有空对象，它也能够是一个空对象。下面全部的论点都是元素的孩子。元素中的文本也做为子元素计数，所以字符串“内容！”做为函数调用的第三个参数放置。

你已经能够想象当咱们有更多孩子时会发生什么：

<div className='cn'>
  Content 1!
  <br />
  Content 2!
</div>
React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',              // 1st child
  React.createElement('br'), // 2nd child
  'Content 2!'               // 3rd child
)

咱们的函数如今有五个参数：元素类型、属性对象和三个子元素。由于咱们的一个孩子也是一个众所周知的反应，它将被描绘成一个函数调用。

如今，咱们已经覆盖了两种类型的儿童：平原String或者另外一个电话React.createElement。然而，其余价值也能够做为论据：

  • 基元false, null, undefined以及true
  • 阵列
  • 反应组件

数组是用来做为一个参数分组并传递的子元素：

React.createElement(
  'div',
  { className: 'cn' },
  ['Content 1!', React.createElement('br'), 'Content 2!']
)

固然，反应的力量来自于html规范中描述的标签，可是来自用户建立的组件，例如：

function Table({ rows }) {
  return (
    <table>
      {rows.map(row => (
        <tr key={row.id}>
          <td>{row.title}</td>
        </tr>
      ))}
    </table>
  );
}

组件容许咱们将模板破坏成可重用的块。在一个示例中，“功能”上面的组件接受数组行数据的对象数组，并返回单个React.createElement请呼叫<table>元素及其行做为子。

每当咱们把组件放置到这样的布局中：

<Table rows={rows} />

从浏览器的角度来看，咱们写了这篇文章：

React.createElement(Table, { rows: rows });

注意，此次咱们的第一个参数不是String描述一个html元素，可是对咱们定义的函数的引用当咱们编码咱们的组件时。咱们的属性如今是咱们的props.

将组件放在页面上

因此，咱们已经将全部的JSX组件都转换成纯javascript，如今咱们有了一系列函数调用，其中还有其余函数调用，还有其余函数调用…如何将它们转换成构成web页面的dom元素？

为了这个，咱们有一个ReactDOM图书馆及其render方法：

function Table({ rows }) { /* ... */ } // defining a component

// rendering a component
ReactDOM.render(
  React.createElement(Table, { rows: rows }), // "creating" a component
  document.getElementById('#root') // inserting it on a page
);

什么时候ReactDOM.render被称为React.createElement最后调用了它，它返回如下对象：

// There are more fields, but these are most important to us
{
  type: Table,
  props: {
    rows: rows
  },
  // ...
}

这些对象构成了虚拟dom在反应上的意义。

它们将在全部进一步渲染中相互比较，最终转换为实dom(与虚拟).

下面是另外一个例子：此次使用div具备类属性和若干子属性：

React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',
  'Content 2!',
);

变成：

{
  type: 'div',
  props: {
    className: 'cn',
    children: [
      'Content 1!',
      'Content 2!'
    ]
  }
}

注意，过去使用的是单独的参数React.createElement函数在a/s之下找到了它们的位置children内钥匙props。因此它无所谓若是孩子做为数组或参数列表传递-在生成的虚拟dom对象中，它们最终都会一块儿结束。

此外，咱们能够将孩子直接添加到在代码中，结果仍然是同样的：

<div className='cn' children={['Content 1!', 'Content 2!']} />

构建了虚拟dom对象以后，ReactDOM.render将尝试将其转换为咱们浏览器能够根据这些规则显示的Dom节点：

  • 若是type属性持有弦使用标记名称-建立一个标记，其中列出了下面列出的全部属性props.

  • 若是咱们有一个函数或类type-调用它并递归地重复一个结果。

  • 若是有什么children下props-逐个重复这个过程，并将结果放置在父节点的Dom节点内。

所以，咱们获得如下html(对于咱们的表示例)：

<table>
  <tr>
    <td>Title</td>
  </tr>
  ...
</table>

重建在

在实践中，render一般会在根元素上调用一次，而且进一步更新经过state.

注意：“从新”在标题中！当咱们想要作的时候，真正的反应就开始了更新一页没有取代一切。咱们怎么能作到这一点也没有什么办法。让咱们从最简单的一个调用开始ReactDOM.render对于同一个节点再一次.

// Second call
ReactDOM.render(
  React.createElement(Table, { rows: rows }),
  document.getElementById('#root')
);

此次，上面的代码将与咱们已经看到的不一样。响应将从零开始建立全部Dom节点，并将它们放到页面上，而响应将开始和解(或“diffing”)算法来肯定必须更新节点树的哪些部分，而且能够保持未受影响。

那么，它是如何工做的呢？只有几个简单的场景和理解他们咱们的优化将会帮助咱们不少。请记住，咱们如今正在查看做为响应虚拟dom中节点的表示形式的对象。

  • 设想1：type是一个字符串，type在电话里保持相同的距离props也没有改变。
// before update
{ type: 'div', props: { className: 'cn' } }

// after update
{ type: 'div', props: { className: 'cn' } }

这是最简单的例子：dom保持不变。

  • 设想2：type仍然是同一个字符串，props是不一样的。
// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'div', props: { className: 'cnn' } }

做为咱们type仍然表示html元素响应知道如何经过标准的Dom调用更改其属性，而无需从一种树中删除节点。

  • 设想3：type已经变了不一样String或从String到组件上。
// before update:
{ type: 'div', props: { className: 'cn' } }

// after update:
{ type: 'span', props: { className: 'cn' } }

当响应如今看到类型不一样时，它甚至不会尝试更新咱们的节点：旧元素将会被删除(下装) 和全部的孩子一块儿。所以，对于彻底不一样的高级别dom树的元素替换一个元素可能很是昂贵。幸运的是，在现实世界里不多发生这种事。

记住反应用途是很重要的===(三倍等于)比较type值，因此它们必须是相同的实例同一类或同功能。

接下来的场景更有趣，由于这就是咱们常用反应的方式。

  • 情景4：type是一个组件。
// before update:
{ type: Table, props: { rows: rows } }

// after update:
{ type: Table, props: { rows: rows } }

“但是什么都没变！”你也许会说，你会错的。

注意组件的render(只有类组件已显式定义了此方法)，但与ReactDOM.render。“渲染”这个词的确在反应世界中确实被过分使用了。

若是type是对函数或类(即正则反应组件)的引用，而且咱们开始了树的调整过程，而后反应老是试图看内组件以确保返回的值返回render没有改变(预防反作用的一种预防)。冲洗和重复每个组件下树-是的，复杂的渲染也可能变得昂贵！

照顾孩子

除了上面描述的四个常见场景外，咱们还须要考虑当元素有多个子时的响应行为。咱们假设咱们有这样一个元素：

// ...
props: {
  children: [
      { type: 'div' },
      { type: 'span' },
      { type: 'br' }
  ]
},
// ...

咱们想把这些孩子们洗牌：

// ...
props: {
  children: [
    { type: 'span' },
    { type: 'div' },
    { type: 'br' }
  ]
},
// ...

而后呢？

若是“diffing”，反应就会看到任何内部阵列props.children它开始比较它中的元素与它以前看到的数组中的元素，而后依次查看它们：索引0将与索引0、索引1和索引1等进行比较。对于每一对，反应将应用上面描述的规则集。在咱们的例子中，它看到div变成了一个span因此设想3将被应用。这并非很是有效的：想象一下，咱们已经从1000行表中删除了第一行。反应将不得不“更新”剩余999名儿童，由于他们的内容如今不会相等，若是与先前的表明指数相比，则是相等的。

幸运的是，反应有内建来解决这个问题。若是元素具备key属性将比较元素的值。key不是按指数来的。只要钥匙是独一无二的，反应就会围绕着元素移动无将它们从Dom树中移除而后将它们放到后面(在响应中已知的过程为安装/卸载).

// ...
props: {
  children: [ // Now React will look on key, not index
    { type: 'div', key: 'div' },
    { type: 'span', key: 'span' },
    { type: 'br', key: 'bt' }
  ]
},
// ...

当状态发生变化时

直到如今咱们才接触到props反应哲学的一部分，但忽略了state。下面是一个简单的“有状态”组件：

class App extends Component {
  state = { counter: 0 }

  increment = () => this.setState({
    counter: this.state.counter + 1,
  })

  render = () => (<button onClick={this.increment}>
    {'Counter: ' + this.state.counter}
  </button>)
}

因此，咱们有一个counter密钥在咱们的状态对象中。单击按钮时会增长其值并更改按钮文本。可是当咱们这么作时，在一个Dom里发生了什么？其中哪些部分将从新计算和更新？

呼叫this.setState也会致使从新渲染，但不会致使整个页面，可是只有一个组件自己及其孩子。父母和兄弟姐妹都是免费的。当咱们拥有一棵大树时，这很方便，咱们只想重绘它的一部分。

钉住问题

咱们已经准备好了小演示应用程序因此在咱们去修它们以前，你能够看到野外最多见的问题。您能够查看它的源代码。这里。你也须要反应开发工具因此请确保您安装了它们为您的浏览器。

咱们首先要看的是哪些元素和什么时候使虚拟dom被更新。导航到浏览器的dev工具中的响应面板，并选择“突出更新”复选框：

React DevTools in Chrome with 'Highlight updates' checkbox selected

在chrome中使用“突出更新”复选框进行响应

如今尝试将一行添加到表中。正如您所看到的，在页面上每一个元素周围都出现了边框。这意味着每次添加一行时，响应都是计算和比较整个虚拟dom树。如今尝试在一行中打一个计数器按钮。您能够看到虚拟dom在更改时如何更新state-只有有关因素及其子女受到影响。

对问题可能发生的地方作出反应，但告诉咱们细节：尤为是更新问题意味着“diffing”元素或挂载/从新设置它们。为了找到更多的信息，咱们须要使用反应的内置探查器(注意它不会在生产模式中工做)。

加?react_perf对于您的应用程序的任何url，并进入chrome浏览器中的“性能”选项卡。点击录制按钮并点击桌子周围。添加一些行，更改一些计数器，而后点击“中止”。

React DevTools' 'performance' tab

反应DevTools‘性能’选项卡

在所产生的输出中，咱们对“用户计时”感兴趣。缩放到时间线直到看到“反应树协调”组及其孩子。这些都是咱们的组件的名称[最新状况]或[山]在他们旁边。

咱们的大部分业绩问题都属于这两类。

不管是组件(以及来自它的全部分支)都是出于某些缘由从新安装在每一个更新上，咱们不但愿它(从新安装慢)，或者咱们正在执行昂贵的和解，大型分支，尽管没有任何改变。

修理东西：安装/安装

如今，当咱们发现了一些关于如何作出反应决定更新虚拟dom并了解如何查看幕后发生的事情时，咱们终于准备好修复事情了！首先，让咱们来处理坐骑/unmounts。

若是您仅仅考虑到任何元素/组件的多个子元素都表示为列阵内部。

考虑到这一点：

<div>
  <Message />
  <Table />
  <Footer />
</div>

在咱们的虚拟dom中，它将被表示为：

// ...
props: {
  children: [
    { type: Message },
    { type: Table },
    { type: Footer }
  ]
}
// ...

咱们有一个简单的Message这是一个div持有一些文本(想一想您的花园品种通知)和一个巨大的Table跨越，比方说，1000+行。他们都是被包围的孩子div因此它们被置于下面props.children在父节点上，它们不会碰巧有一个键。并且反应不会提醒咱们经过控制台警告来分配密钥，由于子元素正在被传递给父级React.createElement做为参数列表，而不是数组。

如今咱们的用户已经驳回了通知，Message从树上移走。Table以及Footer剩下的都是。

// ...
props: {
  children: [
    { type: Table },
    { type: Footer }
  ]
}
// ...

反应如何看？它把它看做是一个改变形状的儿童的数组：children[0]持有Message如今它占据了Table。没有比与之相比的键，因此比较type由于它们都引用函数(以及异类函数)n.unmounts总体Table而后再挂载它，渲染全部的孩子：1000+行！

因此，您能够添加惟一的键(可是在这个特定的例子中使用键不是最好的选择)，或者去寻找一个更聪明的技巧：使用短路布尔估计这是javascript和许多其余现代语言的特色。看：

// Using a boolean trick
<div>
  {isShown && <Message />}
  <Table />
  <Footer />
</div>

即便Message走出画面，props.children父母div仍会持有3元素，children[0]有价值false(布尔基)。记住true/false, null以及undefined是虚拟dom对象的全部容许值type财产？咱们最终得出了这样的结论：

// ...
props: {
  children: [
    false, //  isShown && <Message /> evaluates to false
    { type: Table },
    { type: Footer }
  ]
}
// ...

因此，Message或者不是，咱们的索引不会改变，Table固然，将仍然与Table(指组件的引用)type不管如何开始和解，可是仅仅比较虚拟dom比删除Dom节点和从头开始建立它们更快。.

如今让咱们来看看更进化的东西。咱们知道你喜欢特设s.一个高阶组件是一个函数，它将组件做为参数，作一些事情，并返回一个不一样的函数：

function withName(SomeComponent) {
  // Computing name, possibly expensive...
  return function(props) {
    return <SomeComponent {...props} name={name} />;
  }
}

这是一个很是常见的模式，但您须要当心处理它。考虑：

class App extends React.Component() {
  render() {
    // Creates a new instance on each render
    const ComponentWithName = withName(SomeComponent);
    return <SomeComponentWithName />;
  }
}

咱们正在建立一个父的内部的一个特殊的render方法。当咱们从新渲染树时，咱们的虚拟dom看起来就像这样：

// On first render:
{
  type: ComponentWithName,
  props: {},
}

// On second render:
{
  type: ComponentWithName, // Same name, but different instance
  props: {},
}

如今，响应将喜欢只运行一个基于上的算法ComponentWithName可是，正如这个时候，同一个名称引用了不一样实例三重相等比较失败，而不是和解，彻底从新安装必须发生。注意，它也会致使国家失去正如这里所描述的。幸运的是，它很容易修复：您须要始终在render:

// Creates a new instance just once
const ComponentWithName = withName(Component);

class App extends React.Component() {
  render() {
    return <ComponentWithName />;
  }
}

修复事物：更新

因此，如今咱们确保不要从新安装东西，除非必要。然而，对于位于中的树根附近的组件的任何更改都会致使全部子树的从新链接和协调。结构复杂，价格昂贵，并且经常能够避免。

Would be great to have a way to tell React not to look at a certain branch, as we are confident there were no changes in it.

这种方法存在，它涉及到一种称为shouldComponentUpdate它是组件的生命周期。此方法称为之前每一个对组件的调用render并接收道具和状态的新值。而后咱们能够自由地将它们与当前值进行比较，并决定是否应该更新组件(返回)。true或false那就是。若是咱们返回false反应不会从新渲染所涉组件，而且不会查看其子元素。

一般比较两组props以及state简单的浅层比较是足够的：若是顶级的值不一样，咱们没必要更新。浅比较不是javascript的特性，但却有不少公用事业为了那个。

经过他们的帮助，咱们能够编写咱们的代码以下：

class TableRow extends React.Component {

  // will return true if new props/state are different from old ones
  shouldComponentUpdate(nextProps, nextState) {
    const { props, state } = this;
    return !shallowequal(props, nextProps)
           && !shallowequal(state, nextState);
  }

  render() { /* ... */ }
}

可是您甚至没必要本身编码，由于响应中包含了这个特性，类调用 React.PureComponent。它相似于React.Component只有shouldComponentUpdate已为您实现了浅层道具/状态比较。

听起来好像是个没脑子的，只是交换Component为PureComponent在extends你班的一部分定义并享受效率。不过别这么快！考虑这些例子：

<Table
    // map returns a new instance of array so shallow comparison will fail
    rows={rows.map(/* ... */)}
    // object literal is always "different" from predecessor
    style={ { color: 'red' } }
    // arrow function is a new unnamed thing in the scope, so there will always be a full diffing
    onUpdate={() => { /* ... */ }}
/>

上面的代码片断演示了三个最多见的代码反模式。尽可能避开他们！

若是您注意到建立全部对象、数组和函数以外的render定义并确保他们不会在电话之间发生变化-你是安全的。

你能够观察到PureComponent在更新演示全部桌子的位置Rows是“净化”的。若是您在响应DevTools中打开“突出更新”，您将注意到只有表自己和新行正在行插入中呈现，全部其余行都保持不变。

然而，若是你不能等待尽心尽力在纯组件上，并在您的应用程序中处处实现它们-中止本身。比较两组props以及state不是免费的，对于大多数基本组件来讲都不是值得的：要运行更多的时间。shallowCompare比在算法。

使用这个经验法则：纯组件对复杂表单和表很好，可是它们一般会简化一些简单元素，好比按钮或图标。

关注小编了解更多精彩内容

还可加入咱们的前端学习qun：天天收听精品免费学习课堂

同时我将为您分享精品资料，2-1-3-1-2-6-4-8-6 邀请码：落叶

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程