ES6 React组件中的PureRenderMixin

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

源代码的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的优雅替代品.