adding documentation pages for shallowCompare addon
Zach Ramaekers committed
Dec 4, 2015 at 08:53 UTC
ad54e49f0c4d6e3e9562ca8a0f1a7e64edefde51
5 files changed
+37
-2
docs/_data/nav_docs.yml
+2
@@ -65,6 +65,8 @@
65
title: PureRenderMixin
66
- id: perf
67
title: Performance Tools
68
+ - id: shallow-compare
69
+ title: Shallow Compare
70
- id: advanced-performance
71
title: Advanced Performance
72
- id: context
docs/docs/10-addons.md
+1
@@ -14,6 +14,7 @@ The React add-ons are a collection of useful utility modules for building React
14
- [`createFragment`](create-fragment.html), to create a set of externally-keyed children.
15
- [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
16
- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
17
+- [`shallowCompare`](shallow-compare.html), a helper function that performs a shallow comparison for props and state in a component to decide if a component should update.
18
19
The add-ons below are in the development (unminified) version of React only:
20
docs/docs/10.10-shallow-compare.md
new
+32
@@ -0,0 +1,32 @@
1
+---
2
+id: shallow-compare
3
+title: Shallow Compare
4
+permalink: shallow-compare.html
5
+prev: perf.html
6
+next: advanced-performance.html
7
+---
8
+
9
+`shallowCompare` is a helper function to achieve the same functionality as `PureRenderMixin` while using ES6 classes with React.
10
+
11
+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.
12
+
13
+Example:
14
+
15
+```js
16
+var shallowCompare = require('react-addons-shallow-compare');
17
+export class SampleComponent extends React.Component {
18
+ shouldComponentUpdate(nextProps, nextState) {
19
+ return shallowCompare(this, nextProps, nextState);
20
+ }
21
+
22
+ render() {
23
+ return <div className={this.props.className}>foo</div>;
24
+ }
25
+}
26
+```
27
+
28
+`shallowCompare` performs a shallow equality check on the current `props` and `nextProps` objects as well as the current `state` and `nextState` objects.
29
+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.
30
+
31
+`shallowCompare` returns `true` if the shallow comparison for props or state fails and therefore the component should update.
32
+`shallowCompare` returns `false` if the shallow comparison for props and state both pass and therefore the component does not need to update.
docs/docs/10.9-perf.md
+1
-1
@@ -3,7 +3,7 @@ id: perf
3
title: Performance Tools
4
permalink: perf.html
5
prev: pure-render-mixin.html
6
-next: advanced-performance.html
6
+next: shallow-compare.html
7
---
8
9
React is usually quite fast out of the box. However, in situations where you need to squeeze every ounce of performance out of your app, it provides a [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) hook where you can add optimization hints to React's diff algorithm.
docs/docs/11-advanced-performance.md
+1
-1
@@ -2,7 +2,7 @@
2
id: advanced-performance
3
title: Advanced Performance
4
permalink: advanced-performance.html
5
-prev: perf.html
5
+prev: shallow-compare.html
6
next: context.html
7
---
8