5.Optimizing Performance（性能优化）

React版本：15.4.2
**翻译：xiyoki **

在内部，React使用几种聪明的技术来最小化更新UI所需的昂贵的DOM操作的数量。对于许多应用程序，使用React将导致快速的用户界面，而无需进行大量工作来专门优化性能。然而，有几种方法可以加快你的React应用程序。

Use The Production Build（使用生产构建）

在你的React应用程序中，如果你遇到了基准测试或性能方面的问题，请确保你正使用缩小的生产版本进行测试：

• 对于创建React应用程序，你需要运行npm run build,并按照说明进行操作。
• 对于单文件构建，我们提供production-ready min.js版本。
• 对于Browserify，你用需要用NODE_ENV=production来运行它。
• 对于Webpack，你需要在你的生产配置中，将其添加到插件中：

new webpack.DefinePlugin({
  'process.env': {
    NODE_ENV: JSON.stringify('production')
  }
}),
new webpack.optimize.UglifyJsPlugin()

• 对于Rollup，你需要在CommonJS插件之前使用replace插件。因此，development-only 模块不被导入。完整的设置示例see this gist。

plugins: [
  require('rollup-plugin-replace')({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  require('rollup-plugin-commonjs')(),
  // ...
]

当构建你的应用程序时，development build 包含的额外警告十分有用，但它额外的bookkeeping会让其自身变慢。

Profiling Components with Chrome Timeline（使用Chrome时间轴分析组件）

在development模式下，你可以在支持的浏览器中使用性能工具来可视化组件的加载，更新和卸载。例如：

在Chrome中执行此操作：

1. 通过在查询字符串中加入?react_perf来加载你的应用程序（例如，http://localhost:3000/?react_perf）。
2. 打开Chrome DevTools Timeline选项卡，然后按住Record。
3. 执行你想配置的操作，记录时间不要超过20秒，否则Chrome可能会挂起。
4. 停止记录。
5. React事件将在User Timing标签下分组。

请注意，数字是相对的，因此组件在生产中渲染得更快。尽管如此，这应该可以帮助你了解到不相关的UI被错误更新，以及你的UI更新的深度和频率。
目前，Chrome，Edge和IE是唯一支持此功能的浏览器，但我们使用标准的User Timing API，因此我们希望更多的浏览器能支持此功能。

Avoid Reconciliation

React构建并维护已渲染的UI的内部表示。它包含从组件返回的React元素。此表示使React避免创建DOM节点和访问现有的超出必要性的节点，因此它可能比Javascript对象上的操作更慢。有时它被称为‘虚拟DOM’，但是它在React Native上以相同的方式工作。
当组件的props或state更改时，React通过将新返回的元素与先前已渲染的元素进行比较，来决定是否需要实际的DOM更新。当它们不相等时，React将更新DOM。
在某些情况下，你的组件可以通过覆盖在重新渲染过程开始前就触发的生命周期函数shouldComponentUpdate来加快这一切。该函数的默认实现是返回true，让React执行更新：

shouldComponentUpdate(nextProps, nextState) {
  return true;
}

如果你知道在某些情况下你的组件不需要更新，相反，你可以从shouldComponentUpdate返回false跳过整个渲染过程，包括当前和之下组件上的render()调用。

shouldComponentUpdate In Action

这是一个组件的子树。对于每一个节点，SCU指示shouldComponentUpdate返回的内容，而vDOMEq指示渲染的React元素是否等效。最后，圆圈的颜色表示组件是否必须reconciled 。

对于以C2为根的子树，由于 shouldComponentUpdate返回 false，React没有尝试渲染C2，因此甚至不必在C4和C5上调用 shouldComponentUpdate。
对于C1和C3， shouldComponentUpdate返回 true,所以React必须下到叶子检查它们。对于C6， shouldComponentUpdate返回 true，并且因为渲染的元素不等价，React不得不更新DOM。
最后一个有趣的例子是C8。React不得不渲染这个组件，但是由于它返回的React元素等于先前已渲染的元素，所以它不必更新DOM。
注意React只需要为C6做DOM更新，这是不可避免的。对于C8，它通过比较已渲染的React元素解脱（bailed out）了。对于C2的子树和C7，由于我们已从 shouldComponentUpdate上解脱（bailed out），它甚至没有必要对元素进行比较，并且render也没有被调用。

Examples

当props.color或state.count变量的改变是你组件改变的唯一方式时，你可以使用shouldComponentUpdate检查：

class CounterButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (this.props.color !== nextProps.color) {
      return true;
    }
    if (this.state.count !== nextState.count) {
      return true;
    }
    return false;
  }

  render() {
    return (
       this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      
    );
  }
}

这段代码，shouldComponentUpdate只是检查props.color或state.count是否有任何变化。如果这些值不更改，组件不更新。如果你的组件更复杂，你可以使用一个类似的模式在props和state的所有字段之间做一个浅比较，以确定组件是否应该更新。
这个模式是常见的，React提供了从React.PureComponent继承而来的logic-just的用法。所以这段代码以一个更简单的方法来实现相同的事情：

class CounterButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {count: 1};
  }

  render() {
    return (
       this.setState(state => ({count: state.count + 1}))}>
        Count: {this.state.count}
      
    );
  }
}

大多数时候，你可以使用React.PureComponent，而不是自己写shouldComponentUpdate。它只做一个浅的比较，因此如果props或state以一个浅比较会错过的方式被改变，你就不能使用它。
这可能是更复杂的数据结构的问题。例如，假设你想要一个ListOfWords组件来渲染一个以逗号分隔的单词列表，有一个WordAdder父组件，让你点击按钮添加一个单词到单词列表中。此代码无法正常工作：

class ListOfWords extends React.PureComponent {
  render() {
    return 
{this.props.words.join(',')}
;
  }
}

class WordAdder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      words: ['marklar']
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // This section is bad style and causes a bug
    const words = this.state.words;
    words.push('marklar');
    this.setState({words: words});
  }

  render() {
    return (
      

        
        
      
    );
  }
}

问题在于，PureComponent将在this.props.words的新值和旧值之间做一个简单的比较。由于该代码在WordAdder组件的handleClick方法中改变words数组，因此this.props.words的新值和旧值比较后依然相等。该ListOfWords因此将不会更新，即使它应该渲染新的单词。

The Power Of Not Mutating Data

避免此问题的最简单的方法是避免使用正作为props或state使用的mutating values。例如，上面的handleClick方法可以用concat重写为：

handleClick() {
  this.setState(prevState => ({
    words: prevState.words.concat(['marklar'])
  }));
}

ES6支持数组的扩展语法，可以使这更容易。如果你正在使用Create React App，此语法默认可用。

handleClick() {
  this.setState(prevState => ({
    words: [...prevState.words, 'marklar'],
  }));
};

你也可以重写代码，以类似的方式mutates对象，以避免mutation。例如，我们有一个名为colormap的对象，我们要写一个将colormap.right改变成'blue'的函数。我们可以写：

function updateColorMap(colormap) {
  colormap.right = 'blue';
}

要写这个，而不改变原始对象，我们可以使用Object.assign方法：

function updateColorMap(colormap) {
  return Object.assign({}, colormap, {right: 'blue'});
}

updateColorMap现在返回一个新对象，而不是改变旧的对象。Object.assign是ES6新增的，需要polyfill。
有一个添加 object spread properties的Javascript 提议，使得更新对象更容易，也不会有mutation：

function updateColorMap(colormap) {
  return {...colormap, right: 'blue'};
}

如果你使用Create React App，默认情况下，Object.assign和object spread syntax都有效。

Using Immutable Data Structures（使用不可变数据结构）

Immutable.js 是另一个解决这个问题的方法。它提供了不可变，持久的集合，通过结构共享工作：

• 不可变：一旦创建，集合不能在另一个时间点更改。
• 持久性：新集合可以从先前的集合和诸如set的mutation中创建而来。新集合创建后，原始集合仍然有效。
• 结构共享：使用与原始集合相同的结构创建新集合，从而将复制减少到最低程度以提高性能。

不变性使跟踪变化更便宜。变化将始终导致一个新对象，因此我们只需要检查对对象的引用是否已更改。例如，在这个常规的Javascript代码中：

const x = { foo: "bar" };
const y = x;
y.foo = "baz";
x === y; // true

虽然y被编辑，但由于它和x都是对同一个对象的引用，这个比较返回true。你可以用immutable.js编写类似的代码：

const SomeRecord = Immutable.Record({ foo: null });
const x = new SomeRecord({ foo: 'bar'  });
const y = x.set('foo', 'baz');
x === y; // false

在这种情况下，由于在变异时返回一个新的引用x,我们可以安全地假设x已经改变。
另外两个可以帮助使用不可变数据的库是 seamless-immutable和immutability-helper.
不可变的数据结构为你提供了一种便宜的方式来跟踪对象的更改，这是我们实现shouldComponentUpdate所需要的。这可以为你提供一个不错的性能提升。