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這個庫。