Question

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

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

Answer 1

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

shallowCompare是实现相同功能的辅助函数将ES6类与React一起使用时，作为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>;
  }
}

Source code的{p> 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解决方案：

创建更高阶的组件（例如here）
如果您愿意在Babel中启用早期ES7提案（例如here）

我还没有真正尝试过我为＃2链接过的图书馆，但装饰师却把我视为mixins的优雅替代品。

Answer 3

根据文件，还没有。

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

Answer 4

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

ES6 React组件中的PureRenderMixin

4 个答案: