ES6 React组件中的PureRenderMixin

Question

有没有办法在React ES6类组件中包含mixin？ （即extends React.Component ）？ 如果是这样，官方的做法是什么？

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

Answer 1

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

shallowCompare是一个辅助函数，可以在使用带有React的ES6类时实现与PureRenderMixin相同的功能。

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>;
  }
}

PureRenderMixin 源代码是：

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

因此，当您使用PureRenderMixin ，您实际上使用shallowCompare

更新15.3.0 ：

添加React.PureComponent - 一个新的基类来扩展，替换react-addons-pure-render-mixin ，因为mixin不能与ES2015类一起使用。

Answer 2

在ES6风格的React类中，通常有两种mixin解决方案：

1. 创建一个更高阶的组件（例如这里 ）
2. 如果您愿意在Babel中启用早期阶段的ES7提案，请使用装饰器（例如此处 ）

我实际上没有尝试过我为＃2链接的库，但是装饰者将我视为mixins的优雅替代品。

Answer 3

根据文件，还没有。

资料来源： http ： //facebook.github.io/react/docs/reusable-components.html#no-mixins

Answer 4

如果我想在我的es6反应组件中使用mixins，我会使用react-mixin ，但我没有尝试使用PureRenderMixin这个库。