PureRenderMixin
もし、あなたのReactコンポーネントのrender関数が"純粋"(言い換えると、同じpropsとstateを与えると、同じ結果が描画されるということ)であれば、 あるケースにおいてパフォーマンスが向上するmixinを使用することが出来ます。
例えば、
var PureRenderMixin = require('react/addons').addons.PureRenderMixin;
React.createClass({
mixins: [PureRenderMixin],
render: function() {
return <div className={this.props.className}>foo</div>;
}
});
内部的には、このmixinはshouldComponentUpdateを実装し、
そこで現在のpropsとstateと次のものを比較し、もし等式が成り立たなければfalseを返します。
注意:
これは、オブジェクトの浅い(shallowly)比較だけになります。
もし、これらが複雑なデータ構造を含むのであれば、
深い階層での比較で、false-negative(見逃し)が発生するかもしれません。
深い部分でデータ構造が変更されていることが分かっている場合、
シンプルなpropsとstateを持つコンポーネントのみをmixinするか、
forceUpdate()を使用します。
または、入れ子データの比較の速度向上を促すimmutable objectsの使用を検討して下さい。
更に、shouldComponentUpdateはコンポーネントのサブツリーの更新をまるごとスキップします。
そのため、全ての子コンポーネントも"純粋"であることを確認して下さい。