mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
0bf79b420b
Immutable.js link https://facebook.github.io/immutable-js/ is now 404, change them to the correct address https://immutable-js.com/.
52 lines
1.9 KiB
Markdown
52 lines
1.9 KiB
Markdown
---
|
|
id: pure-render-mixin
|
|
title: PureRenderMixin
|
|
layout: docs
|
|
category: Reference
|
|
permalink: docs/pure-render-mixin-old.html
|
|
---
|
|
|
|
> Note
|
|
|
|
> The `PureRenderMixin` mixin predates `React.PureComponent`. This reference doc is provided for legacy purposes, and you should consider using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) instead.
|
|
|
|
If your React component's render function renders the same result given the same props and state, you can use this mixin for a performance boost in some cases.
|
|
|
|
Example:
|
|
|
|
```js
|
|
var PureRenderMixin = require('react-addons-pure-render-mixin');
|
|
var createReactClass = require('create-react-class');
|
|
createReactClass({
|
|
mixins: [PureRenderMixin],
|
|
|
|
render: function() {
|
|
return <div className={this.props.className}>foo</div>;
|
|
}
|
|
});
|
|
```
|
|
|
|
Example using ES6 class syntax:
|
|
|
|
```js
|
|
import PureRenderMixin from 'react-addons-pure-render-mixin';
|
|
class FooComponent extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
|
|
}
|
|
|
|
render() {
|
|
return <div className={this.props.className}>foo</div>;
|
|
}
|
|
}
|
|
```
|
|
|
|
Under the hood, the mixin implements [shouldComponentUpdate](/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:
|
|
>
|
|
> 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](https://immutable-js.com/) to facilitate fast comparisons of nested data.
|
|
>
|
|
> Furthermore, `shouldComponentUpdate` skips updates for the whole component subtree. Make sure all the children components are also "pure".
|