ESR React组件中的PureRenderMixin
有什么方法可以在React ES6类组件中包含mixin吗? (即extends React.Component
)?如果是这样,那么官方的做法是什么?ESR React组件中的PureRenderMixin
我想在包含PureRenderMixin
的组件中包含一个不可变状态的组件,以加速差异化进程。
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>;
}
}
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类。
自从您__can__将'PureRenderMixin'与'es6'一起使用,究竟是什么差异? – Tjorriemorrie
@Tjorriemorrie,如果您在构造函数中讨论类似'this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);'的代码,而不是使用'shallowCompare' addone的另一种方式。 请参阅https://github.com/facebook/react/blob/v15.0.0/src/addons/ReactComponentWithPureRenderMixin.js#L41-L43 –
我很感谢您为我做这项研究:) –