var pureRender = (Component) => { | |
Object.assign(Component.prototype, { | |
shouldComponentUpdate (nextProps, nextState) { | |
return !shallowEqual(this.props, nextProps) || | |
!shallowEqual(this.state, nextState); | |
} | |
}); | |
}; | |
module.exports = pureRender; | |
/////////////////////////////////////////////////// | |
var pureRender = require('./pureRender'); | |
class Foo extends React.Component { | |
render () { | |
return <div>this ain’t so bad</div> | |
} | |
} | |
pureRender(Foo); // don't return so you know its mutative :( | |
module.exports = Foo; |
This comment has been minimized.
This comment has been minimized.
@benmosher , how do you know whether props or state is updated? Component should rerender in either case, right? |
This comment has been minimized.
This comment has been minimized.
Unfortunately If you really want to do this right, you'll need to pass |
This comment has been minimized.
This comment has been minimized.
j/k this won't work |
This comment has been minimized.
This comment has been minimized.
updated, I can't think of a very declarative way to do this except to mutate the prototype or inherit :\ |
This comment has been minimized.
This comment has been minimized.
@ryanflorence You can still |
This comment has been minimized.
This comment has been minimized.
How do you feel about this approach? class Foo extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate.bind(this);
}
render () {
return <div>Helllo</div>
}
} |
This comment has been minimized.
This comment has been minimized.
@aputinski you get a gold star for simplest possible solution :-) In any cases that are more complex than a single lifecycle hook, this doesn't work as well. @RickWong methods on es6 classes aren't enumerable, but you could do |
This comment has been minimized.
This comment has been minimized.
Does the latest gist work without any issues? Hard to tell by the comments. :) |
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
@aputinski +1 |
This comment has been minimized.
This comment has been minimized.
Won't be easier just extending Component? class PureRenderComponent extends React.Component {
shouldComponentUpdate () {
return React.addons.PureRenderMixin.shouldComponentUpdate.apply(this, arguments)
}
}
class Foo extends PureRenderComponent {
render () {
return (<div>Pure</div>)
}
} |
This comment has been minimized.
This comment has been minimized.
Sorry to pile on, but this is one of the top hits when searching for PureRenderMixin in ES6, my two cents: const pure = function (target) {
target.prototype.shouldComponentUpdate = React.addons.PureRenderMixin.shouldComponentUpdate;
return target;
}
@pure
class Test extends React.Component { } |
This comment has been minimized.
This comment has been minimized.
Hi, is the code provided by @aputinski still works? I'm using react 15.0.1 and it doesn't work for me. |
This comment has been minimized.
This comment has been minimized.
You need to install the addon as well. |
This comment has been minimized.
This comment has been minimized.
@brigand What exactly are the drawbacks to this same approach that is also now listed in the official React docs? |
This comment has been minimized.
Interesting class-y mixin pattern! but why check
shallowEqual(this.state, nextState)
?