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はコンポーネントのサブツリーの更新をまるごとスキップします。 そのため、全ての子コンポーネントも"純粋"であることを確認して下さい。

 Back to top

© 2013-2017 Facebook Inc.
Documentation licensed under CC BY 4.0.

このページは、ページトップのリンク先のReact内のページを翻訳した内容を基に構成されています。 下記の項目を確認し、必要に応じて公式のドキュメントをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • ドキュメントの情報が古い可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報やより分かり易くするための追記を行っている事があります。