ESR React组件中的PureRenderMixin

Question

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

我想在包含PureRenderMixin的组件中包含一个不可变状态的组件，以加速差异化进程。

Answer 1

通常有两种解决方案，混入在ES6风格的阵营类：

1. 创建一个高阶组件（例如here）
2. 使用一个装饰，如果你”愿意启用Babel早期阶段的ES7提案（例如here）

我实际上并没有实现trie d我为＃2链接的图书馆，但装饰者罢工我作为一个优雅的替代mixin。

Answer 2

还没有，根据文件。

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

Answer 3

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

Answer 4

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

shallowCompare是同时使用具有阵营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>; 
    } 
} 

的PureRenderMixinSource code是：

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

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

UPDATE 15.3.0：

添加React.PureComponent - 扩展的新基类，现在替换react-addons-pure-render-mixin mixin不适用于ES2015类。