You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
33 lines
1.3 KiB
33 lines
1.3 KiB
9 years ago
|
---
|
||
|
|
id: shallow-compare
|
||
|
|
title: Shallow Compare
|
||
|
|
permalink: shallow-compare.html
|
||
|
|
prev: perf.html
|
||
|
|
next: advanced-performance.html
|
||
|
|
---
|
||
|
|
|
||
|
|
`shallowCompare` is a helper function to achieve the same functionality as `PureRenderMixin` while using ES6 classes with React.
|
||
|
|
|
||
|
|
If your React component's render function is "pure" (in other words, it renders the same result given the same props and state), you can use this helper function for a performance boost in some cases.
|
||
|
|
|
||
|
|
Example:
|
||
|
|
|
||
|
|
```js
|
||
|
|
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` performs a shallow equality check on the current `props` and `nextProps` objects as well as the current `state` and `nextState` objects.
|
||
|
|
It does this by iterating on the keys of the objects being compared and returning false when the value of a key in each object are not strictly equal.
|
||
|
|
|
||
|
|
`shallowCompare` returns `true` if the shallow comparison for props or state fails and therefore the component should update.
|
||
|
|
`shallowCompare` returns `false` if the shallow comparison for props and state both pass and therefore the component does not need to update.
|