javascript - ES6 React 组件中的 PureRenderMixin

Question

有什么方法可以在 React ES6 类组件中包含 mixin 吗？ (即 extends React.Component)？如果是这样，官方的做法是什么？

我想在我的一个具有不可变状态的组件中包含 PureRenderMixin 以加快差异化过程。

Answer 1

https://facebook.github.io/react/docs/shallow-compare.html

shallowCompare is a helper function to achieve the same functionality as PureRenderMixin while using ES6 classes with React.

import shallowCompare from 'react-addons-shallow-compare';

export default class SampleComponent extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {
    // pure render
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

Source code的 PureRenderMixin是:

var ReactComponentWithPureRenderMixin = {
  shouldComponentUpdate: function(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  },
};

所以，当你使用 PureRenderMixin ，你实际使用shallowCompare

更新15.3.0 :

Add React.PureComponent - a new base class to extend, replacing react-addons-pure-render-mixin now that mixins don't work with ES2015 classes.