52b694eaae
Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder). Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.) The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory: * Modified frontmatter author block to always be an array * Small markdown formatting tweaks
1.9 KiB
id, title, layout, category, permalink
| id | title | layout | category | permalink |
|---|---|---|---|---|
| pure-render-mixin | PureRenderMixin | docs | Reference | docs/pure-render-mixin.html |
Note
The
PureRenderMixinmixin predatesReact.PureComponent. This reference doc is provided for legacy purposes, and you should consider usingReact.PureComponentinstead.
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:
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:
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, 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 to facilitate fast comparisons of nested data.Furthermore,
shouldComponentUpdateskips updates for the whole component subtree. Make sure all the children components are also "pure".