Question

这些例子有什么区别？

class MyPureComponent extends React.PureComponent {
}

和

import shallowCompare from 'react-addons-shallow-compare'`

class MyPureComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState)
  }
}

Answer 1

来自官方文档：

shallowCompare是一个辅助函数，可以在使用带有React的ES6类时实现与PureComponent相同的功能。

如果您的React组件的渲染函数是“纯粹的”（换句话说，它在相同的道具和状态下呈现相同的结果），您可以使用此辅助函数在某些情况下提高性能。

示例：

var shallowCompare = require('react-addons-shallow-compare');
export class SampleComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return shallowCompare(this, nextProps, nextState);
  }

  render() {
    return <div className={this.props.className}>foo</div>;
  }
}

shallowCompare对current props和nextProps对象以及当前状态和nextState对象执行浅等式检查。它通过iterating on the keys of the objects being compared and returning true when the values of a key in each object are not strictly equal执行此操作。

如果props或state的浅层比较失败，则

shallowCompare返回true，因此组件应该更新。如果道具shallowCompare和shallow comparison都通过，则state会返回false，因此该组件不需要update。

使用PureComponent和shallowCompare插件有什么区别吗？

1 个答案: