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.
31 lines
1.3 KiB
31 lines
1.3 KiB
11 years ago
|
---
|
||
|
|
id: pure-render-mixin
|
||
|
|
title: PureRenderMixin
|
||
|
|
permalink: pure-render-mixin.html
|
||
|
|
prev: update.html
|
||
|
11 years ago
|
next: perf.html
|
||
|
11 years ago
|
---
|
||
|
|
|
||
11 years ago
|
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 mixin for a performance boost in some cases.
|
||
|
11 years ago
|
|
||
|
|
Example:
|
||
|
|
|
||
|
|
```js
|
||
10 years ago
|
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
|
||
|
11 years ago
|
React.createClass({
|
||
|
|
mixins: [PureRenderMixin],
|
||
|
|
|
||
|
|
render: function() {
|
||
|
|
return <div className={this.props.className}>foo</div>;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
```
|
||
|
|
|
||
|
|
Under the hood, the mixin implements [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate), in which it compares the current props and state with the next ones and returns `false` if the equalities pass.
|
||
|
|
|
||
|
|
> Note:
|
||
|
|
>
|
||
10 years ago
|
> This only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only mix into components which have simple props and state, or use `forceUpdate()` when you know deep data structures have changed. Or, consider using [immutable objects](http://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
|
||
|
11 years ago
|
>
|
||
|
|
> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
|