React 性能优化：虚拟DOM阐述

学习React的虚拟DOM，并使用这些知识来提高你的应用程序的速度。经过这篇对框架内部实现友好入门的介绍中，咱们将揭开JSX的神秘面纱，向您展现React如何作出渲染决策，解释如何查找瓶颈，并分享一些避免常见错误的技巧。

React不断震撼前端世界，并且没有衰退迹象的缘由之一是它平滑的学习曲线:在了解了JSX和整个“State”，“Props”概念以后，你就能够开始了。

但要真正掌握React，你须要站在React之上进行思考，这篇文章将如你所愿。看看咱们为其中一个项目制做的React表:

有数百个动态的、可过滤的行，理解框架的细微之处就成为保证用户体验顺畅的关键。

当事情出错时，你固然能感受到。输入字段会变慢，复选框须要一秒钟才能被选中，模态窗口展示缓慢。 为了可以解决这类问题，咱们须要走完一个React组件从被你定义到呈现到页面上，而后更新的一整段旅程，那咱们就立刻开始吧！

JSX的背后

React开发人员建议您在编写组件时混合使用HTML和JavaScript，即JSX。可是，浏览器对JSX及其语法一无所知。浏览器只能理解普通的JavaScript，所以必须将JSX转换成普通的JavaScript。下面是包含一个类和一些内容的div的JSX代码

<div className='cn'>
  Content!
</div>
复制代码

在“正式”JavaScript中，这段代码等同于一个带有许多参数的函数调用

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

让咱们仔细看看这些参数。第一个是元素的类型。对于HTML标记，它是一个带有标记名称的字符串。第二个参数是一个具备全部元素属性的对象。若是没有对象，它也能够是空对象。余下全部参数都是元素的子元素。元素内的文本也算做子元素，所以字符串'Content!'做为函数调用的第三个参数

你能够想象当咱们有更多的孩子会发生什么

<div className='cn'>
  Content 1!
  <br />
  Content 2!
</div>
复制代码

React.createElement(
  'div',
  { className: 'cn' },
  'Content 1!',              // 第一个孩子节点
  React.createElement('br'), // 第二个孩子节点
  'Content 2!'               // 第三个孩子节点
)
复制代码

咱们的函数如今有5个参数:一个元素的类型、一个属性对象和3个子元素。因为咱们的一个子标记也是已知的HTML标记，因此这个子标记也将被描述为一个函数调用。

到目前为止，咱们已经介绍了两种类型的子元素:纯字符串或另外一个对React.createElement的调用。可是，其余值也能够用做参数

• 基本数据类型false, null, undefined and true
• 数组
• React组件 使用数组是由于能够将子元素分组并做为一个参数传递

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

React的强大功能固然不是来自HTML规范中描述的标记，而是来自用户建立的组件，好比

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

组件容许咱们将模板分解成可重用的块。在上面的组件示例中，咱们接受一个包含表行数据的对象数组，并返回单个table元素及其行做为子元素的React.createElement调用。 咱们把组件放到页面上时，咱们这样写

<Table rows={rows} />
复制代码

从浏览器的角度来看，咱们都会这样写

React.createElement(Table, { rows: rows });
复制代码

注意，这一次咱们的第一个参数不是描述HTML元素标记，而是在编写组件时定义的函数的引用，咱们的属性如今成了props

将组件放在页面上

所以，咱们已经将全部的JSX组件转换为纯JavaScript，如今咱们有了一堆函数调用，它们的参数是其余函数调用的参数……它是如何所有转换成DOM元素来造成web页面的？ 为此，咱们有一个ReactDOM库及其render方法

function Table({ rows }) { /* ... */ } // 定义一个组件
// 渲染一个组件
ReactDOM.render(
  React.createElement(Table, { rows: rows }), // "建立" 一个组件
  document.getElementById('#root') // 插入到页面
);
复制代码

当ReactDOM.render被调用的时候，React.createElement最终也会被调用并返回如下对象

// 还有更多字段，但这些字段对咱们是最重要的
{
  type: Table,
  props: {
    rows: rows
  },
  // ...
}
复制代码

这些对象构成React意义上的虚拟DOM 它们将在全部进一步的渲染中相互比较，并最终转换为一个真正的DOM(而不是虚拟的)。

下面是另外一个例子:此次的div有一个class属性和几个子元素

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

转换成

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

注意到，在React.createElement函数中，子元素被分开成独立的参数，如今做为内部的props的children键出现，所以，无论子元素是以数组仍是参数列表的形式传递，在最终的虚拟DOM对象中，它们最终都会在一块儿，更重要的是，咱们能够在JSX代码中直接将孩子添加到props中，结果仍然是相同的。

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

在构建一个虚拟DOM对象以后，根据如下规则，ReactDOM.render试图将虚拟DOM对象转换成浏览器能够呈现的DOM节点

• 若是type属性是一个标签字符串--->建立一个包含全部props属性的标签
• 若是type属性是个函数或者是一个类--->调用这个函数或者类，并对结果递归地重复该过程
• 若是props下有任何的children-→对每一个子节点逐个的调用该过程并将结果放在父节点的DOM节点中。

结果，咱们获得如下html(对于上面表格的例子)

<table>
  <tr>
    <td>Title</td>
  </tr>
  ...
</table>
复制代码

重建DOM

注意到标题中的“重建”，当咱们想要更新一个页面而不替换全部内容时，React中真正的魔力就开始了。咱们有不少途径来实现这一目标，让咱们从最简单的开始--->对相同的节点再次调用React.render

// 第二次调用
ReactDOM.render(
  React.createElement(Table, { rows: rows }),
  document.getElementById('#root')
);
复制代码

这一次，上面的代码段的行为将与咱们已经看到的不一样。而不是从头建立全部DOM节点并将它们放在页面上。React将启动调和算法，以肯定哪些节点须要更新，哪些能够保持不变。 那么，它是如何工做的呢?只有少数几个简单的场景，理解它们对咱们的优化有很大的帮助。请记住，咱们如今看到的对象是React Virtual DOM中节点的表示形式

• 场景1：type是字符串，type在调用期间保持不变，props也没有改变

// 更新前
{ type: 'div', props: { className: 'cn' } }
 
// 更新后
{ type: 'div', props: { className: 'cn' } }
复制代码

这是最简单的状况：DOM保持不变

• 场景2：type仍然是字符串，props改变了

// 更新前
{ type: 'div', props: { className: 'cn' } }
 
// 更新后
{ type: 'div', props: { className: 'cnn' } }
复制代码

因为咱们的类型仍然表示HTML元素，React知道如何经过标准的DOM API调用来更改其属性，而无需从DOM树中删除节点

• 场景3：type变成了不一样的字符串或者从一个字符串变成了组件

// 更新前
{ type: 'div', props: { className: 'cn' } }
 
// 更新后
{ type: 'span', props: { className: 'cn' } }
复制代码

当React如今看到类型不一样时，它甚至不会尝试更新咱们的节点:旧元素将与其全部子元素一块儿被删除(卸载)。所以，将一个元素替换为DOM树中彻底不一样的元素可能很是昂贵。幸运的是，这种状况在现实世界中不多发生。 务必记住，React使用===(三重等于)来比较类型值，所以它们必须是相同类或相同函数的相同实例。

下一个场景更有趣，由于这是咱们最经常使用的React方式

• 场景4：type是一个组件

// 更新前
{ type: Table, props: { rows: rows } }
 
// 更新后
{ type: Table, props: { rows: rows } }
复制代码

你可能会说“可是什么也没有改变!”那你就错了。 若是类型是一个函数或一个类(即常规React组件),而后咱们开始树的调和过程,React老是尽可能的深刻到组件内部确保render返回的值没有变化。对树下的每一个组件进行一样的过程——是的，复杂的渲染也可能变得昂贵!

注意一下children

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

// ...
props: {
  children: [
      { type: 'div' },
      { type: 'span' },
      { type: 'br' }
  ]
},
// ...
复制代码

咱们想把这些孩子们拖来拖去

// ...
props: {
  children: [
    { type: 'span' },
    { type: 'div' },
    { type: 'br' }
  ]
},
// ...
复制代码

而后会发生什么呢?

若是，在调和的过程当中，React遇到props.children数组，它开始比较其中的元素和它以前看到的数组中的元素，经过查看它们的顺序:索引0将与索引0进行比较，索引1与索引1进行比较，等等。对于每一对，React将应用上述规则集。在咱们的例子中，它看到div变成了一个span，所以将应用场景3。这不是颇有效:假设咱们从一个1000行的表中删除了第一行。React将不得不“更新”剩下的999个子元素，由于它们的内容与以前对于索引表示的内容将不相等。

幸运的是，React有一个内置的方法来解决这个问题。若是一个元素有一个key属性，那么元素将经过key的值进行比较，而不是经过索引。只要key是唯一的，React就会移动元素，而不须要从DOM树中删除它们，而后将它们放回去(在React中称为挂载/卸载)。

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

当state改变

到目前为止，咱们只接触了React 哲学中的的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也会致使从新渲染，但不是整个页面，而是组件自己及其子组件。父节点和兄弟节点幸免于难。当咱们有一棵很大的树时，这是很方便的，咱们只想重画它的一部分。

理清问题

咱们准备了一个小的演示应用程序，因此你能够看到最多见的问题，在咱们开始修复它们以前。您能够在这里查看它的源代码。您还须要React Developer工具，所以请确保为您的浏览器安装了这些工具。

咱们首先要看的是哪些元素以及何时更新虚拟DOM。导航到浏览器开发工具中的React面板，并选择“高亮显示更新”复选框

如今尝试向表中添加一行。能够看到，页面上的每一个元素周围都有一个边框。这意味着React会在每次添加一行时计算并比较整个虚拟DOM树。如今试着点击一行中的计数器按钮。您将看到有关元素及其子元素的状态更改对虚拟DOM更新的影响

React DevTools暗示了问题可能在哪里，但没有告诉咱们任何细节:特别是所涉及的更新是否意味着“调和”元素或挂载/卸载它们。要了解更多信息，咱们须要使用React的内置分析器(注意，它在生产模式下没法工做)

将?react_perf添加到应用程序的任何URL中，并在Chrome DevTools中打开“Performance”选项卡。点击录制按钮，而后点击表格。添加一些行，改变一些计数器，而后点击“中止”

在结果输出中，咱们感兴趣的是“用户计时”。放大到时间轴，直到看到“React Tree Reconciliation”组及其子组。这些都是咱们组件的名称，旁边有[更新]或[挂载]

咱们的大多数性能问题都属于这两类

要么某个组件(以及从它派生出来的全部组件)因为某种缘由在每次更新时都要从新挂载，咱们不想要从新挂载(从新挂载很慢)，要么咱们在大型分支上执行代价高昂的协调，即便没有任何更改。

解决问题:挂载/卸载

如今，当咱们了解了有关React如何决定更新虚拟DOM的一些理论，并了解了如何查看幕后发生的事情时，咱们终于准备好解决问题了!首先，让咱们处理挂载/卸载。 若是你简单的意识到任务元素/组件的多个子元素在内部被当作一个数组的事实，那么您能够得到很是显著的速度提高

考虑一下这个

<div>
  <Message />
  <Table />
  <Footer />
</div>
复制代码

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

// ...
props: {
  children: [
    { type: Message },
    { type: Table },
    { type: Footer }
  ]
}
// ...
复制代码

咱们有一个简单的消息，它是一个包含一些文本的div和一个巨大的表，比方说，跨越1000多行。它们都是封闭的div的子元素，所以它们被放置在父节点的props.children之下，它们没有key。而React甚至不会提醒咱们经过控制台警告来分配key，由于子节点会做为参数列表而不是数组被传递到父节点的React.createElement ，如今咱们的用户已经取消了一个通知，消息也从树中删除了。只剩下Table和Footer

// ...
props: {
  children: [
    { type: Table },
    { type: Footer }
  ]
}
// ...
复制代码

React会如何看待这种状况？它将被视为children数组改变了形状：children[0]包含的是Message，如今children[0]包含的是Tabel，由于没有可比较的key，因此它比较类型，因为它们都是对函数的引用(以及不一样的函数)，因此它卸载整个表并再次挂载它，呈现它的全部子表:1000+行!

所以，您能够添加惟一的键(但在这种状况下，使用键并非最佳选择)，或者使用更聪明的方法:使用短路布尔求值，这是JavaScript和许多其余现代语言的一个特性。看下面的

// Using a boolean trick
<div>
  {isShown && <Message />}
  <Table />
  <Footer />
</div>
复制代码

即便Message从屏幕中移除，父div的props.children仍然包含三个元素，children[0]的值为false(一个布尔原始值)。还记得true/false、null和undefined都是虚拟DOM对象的type属性的容许值吗?最终获得这样的结果

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

所以，不管有没有Message，咱们的索引都不会改变，固然，Tabel仍然会与Tabel进行比较(不管如何，在类型开始协调时引用组件)，可是仅仅比较虚拟DOM一般比删除DOM节点并再次从头建立它们要快得多

如今让咱们看看更先进的东西。我知道你喜欢高阶组件。高阶组件是一个函数，它接受一个组件做为参数，执行一些操做，而后返回一个不一样的函数

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

这是一个很是常见的模式，可是您须要当心使用它

考虑以下：

class App extends React.Component() {
  render() {
    // 在每一次渲染的时候都生成一个实例
    const ComponentWithName = withName(SomeComponent);
    return <ComponentWithName />;
  }
}
复制代码

咱们在父组件的render方法中建立了一个高阶组件，当从新渲染的时候，咱们的虚拟dom看起来像下面同样

// 第一次渲染:
{
  type: ComponentWithName,
  props: {},
}
 
// 第二次渲染:
{
  type: ComponentWithName, // 相同的名字，不一样的实例
  props: {},
}
复制代码

如今，React但愿在ComponentWithName上运行一个扩展算法，可是因为此次相同的名称引用了不一样的实例，因此三重等于比较失败，并且必须进行完整的从新挂载，而不是调和。注意，它还会致使状态丢失，如这里所述。幸运的是，它很容易修复:你须要把高阶组件建立在render方法以外

const ComponentWithName = withName(Component);
 
class App extends React.Component() {
  render() {
    return <ComponentWithName />;
  }
}
复制代码

解决更新问题

因此，如今咱们确保不从新挂载，除非有必要。可是，对位于DOM树根附近的组件的任何更改都将致使其全部子组件的差别和协调。复杂的结构是昂贵的，一般能够避免。 若是有一种方法能够告诉React不去查看某个分支，那就太好了，由于咱们确信其中没有任何变化。

这种方法是存在的，它涉及到一个名为shouldComponentUpdate的方法，该方法是组件生命周期的一部分。此方法在每次调用组件的render方法以前调用，并接收新的props和state值。而后咱们能够自由地将它们与当前值进行比较，并决定是否应该更新组件(返回true或false)。若是返回false, React将不会从新渲染有问题的组件，也不会查看它的子组件。

一般状况下，对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在React.PureComponent类中已经内置了这个特性，它相似于React.Component，只是经过浅层比较props和state帮你实现了shouldComponentUpdate 。这听起来很简单，只需将类定义的extends部分中的组件替换为PureComponent，就能够享受效率。不过没那么快!考虑这些例子:

<Table
    // map返回的是数组的一个新实例，因此浅层比较会失败
    rows={rows.map(/* ... */)}
    // 字符串字面量始终不会等于前一个
    style={ { color: 'red' } }
    // 在做用域里箭头函数是一个新的未命名的方法，因此它老是触发全局 diffing
    onUpdate={() => { /* ... */ }}
/>
复制代码

上面的代码片断演示了三种最多见的反模式。尽可能避开他们! 若是你在render方法定义以外，建立因此对象、数组、函数，并确保它们不会在调用之间更改，那么您就是安全的。

您能够在更新的演示中观察PureComponent的效果，其中全部表的行都被“净化”了。若是您在React DevTools中打开“Highlight Updates”，您将注意到只有表自己和新行在行插入时呈现，其余全部行都保持不变。

可是，若是您火烧眉毛地要所有使用纯组件并在您的应用程序中处处实现它们，赶忙暂停。比较两组props和state并非免费的，对于大多数基本组件来讲甚至不值得:运行shallowCompare要比使用diffing算法花费更多的时间。

经验法则：纯组件适用于复杂的表单和表，可是对于简单组件例如button、icon，纯组件会下降速度

原文连接:Optimizing React: Virtual DOM explained