0.9.7 • Published 8 years ago
react-immutable-render-mixin v0.9.7
react-immutable-render-mixin
Users are urged to use PureRenderMixin with facebook/immutable-js. If performance is still an issue an examination of your usage of Immutable.js should be your first path towards a solution. This library was created from experimentations with Immutable that were ultimately erroneous; improper usage of Immutable.js :hankey:. Users should be able to achieve maximum performance simply using PureRenderMixin.
This library exposes 4 distinct options for immutable rendering:
- Mixin for
React.createClass
support - HoC ( decorator ) for
React.Component
- shouldComponentUpdate function used by the mixin and HoC
- shallowEqualImmutable function to allow custom
shouldComponentUpdate
implementations
This library when used as a mixin/decorator replaces the PureRenderMixin when using facebook/immutable-js library with React
This Mixin and HoC implements shouldComponentUpdate
method using prop and state equality with Immutable.is().
We also expose the shallowEqualImmutable
to allow developers to craft a custom shouldComponentUpdate
method as needed.
Installation
npm i react-immutable-render-mixin
Usage as Mixin
import immutableRenderMixin from 'react-immutable-render-mixin';
React.createClass({
mixins: [immutableRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
Usage as a HoC
import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
class Test extends React.Component {
render() {
return <div></div>;
}
}
export default immutableRenderDecorator(Test);
Usage as Decorator
import React from 'react';
import { immutableRenderDecorator } from 'react-immutable-render-mixin';
@immutableRenderDecorator
class Test extends React.Component {
render() {
return <div></div>;
}
}
Usage with default shouldComponentUpdate
import React from 'react';
import { shouldComponentUpdate } from 'react-immutable-render-mixin';
class Test extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = shouldComponentUpdate.bind(this);
}
render() {
return <div></div>;
}
}
Usage with a custom shouldComponentUpdate
import React from 'react';
import { shallowEqualImmutable } from 'react-immutable-render-mixin';
class Test extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return !shallowEqualImmutable(this.props, nextProps) || !shallowEqualImmutable(this.state, nextState);
}
render() {
return <div></div>;
}
}
Usage with <= ES5
Exports:
var immutableRenderMixin = require('react-immutable-render-mixin').default;
var immutableRenderDecorator = require('react-immutable-render-mixin').immutableRenderDecorator;
var shallowEqualImmutable = require('react-immutable-render-mixin').shallowEqualImmutable;
var shouldComponentUpdate = require('react-immutable-render-mixin').shouldComponentUpdate;
Full Example:
var immutableRenderMixin = require('react-immutable-render-mixin').default;
React.createClass({
mixins: [immutableRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
0.9.7
8 years ago
0.9.6
8 years ago
0.9.5
8 years ago
0.9.4
8 years ago
0.9.3
8 years ago
0.9.2
8 years ago
0.9.1
8 years ago
0.9.0
8 years ago
0.8.1
9 years ago
0.8.0
9 years ago
0.7.0
9 years ago
0.6.5
9 years ago
0.6.4
9 years ago
0.6.3
9 years ago
0.6.2
9 years ago
0.6.1
9 years ago
0.6.0
10 years ago
0.5.2
10 years ago
0.5.1
10 years ago
0.5.0
10 years ago
0.4.0
10 years ago
0.3.0
10 years ago
0.2.0
10 years ago
0.1.0
10 years ago
0.0.1
10 years ago