☰

ReactJS - 「setState」が呼び出されるたびにレンダリングが呼び出されますか? 質問する

tag-icon • tag-icon javascript reactjs
ReactJS - 「setState」が呼び出されるたびにレンダリングが呼び出されますか? 質問する

setState()React は呼び出されるたびにすべてのコンポーネントとサブコンポーネントを再レンダリングしますか?

もしそうなら、それはなぜですか? React は状態が変化したときに、必要な分だけレンダリングするというのがその考え方だと思いました。

state次の簡単な例では、onClick ハンドラが常に を同じ値に設定するため、後続のクリックでは状態が変わらないにもかかわらず、テキストがクリックされると両方のクラスが再度レンダリングされます。

this.setState({'test':'me'});

データが変更された場合にのみレンダリングが行われると予想していましたstate。

例のコードは次のとおりです。JSフィドルとして、埋め込みスニペット:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

ベストアンサー1

React は、setState が呼び出されるたびにすべてのコンポーネントとサブコンポーネントを再レンダリングしますか?

デフォルトでは、はい。

boolean shouldComponentUpdate(object nextProps, object nextState)というメソッドがあり、各コンポーネントにはこのメソッドがあり、状態を変更するたび、または親コンポーネントから新しいプロパティを渡すたびに、「コンポーネントを更新する必要があるか (レンダリング関数を実行するか)」を判断する役割を担います。

コンポーネントに対してshouldComponentUpdateメソッドの独自の実装を記述することもできますが、デフォルトの実装では常に true が返されます。つまり、レンダリング関数が常に再実行されます。

公式ドキュメントからの引用http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

デフォルトでは、shouldComponentUpdate は、状態がインプレースで変更されたときに微妙なバグを防ぐために常に true を返しますが、状態を常に不変として扱い、render() で props と state から読み取り専用にするように注意すれば、古い props と state をそれらの置き換えと比較する実装で shouldComponentUpdate をオーバーライドできます。

質問の次の部分:

もしそうなら、それはなぜですか? React は状態が変化したときに、必要な分だけレンダリングするというのがその考え方だと思いました。

「レンダリング」と呼ばれるものには 2 つのステップがあります。

  1. 仮想 DOM レンダリング:レンダリングメソッドが呼び出されると、コンポーネントの新しい仮想 DOM構造が返されます。前に述べたように、このレンダリングメソッドは、 shouldComponentUpdate がデフォルトで常に true を返すため、setState()を呼び出すと常に呼び出されます。したがって、デフォルトでは、React では最適化は行われません。

  2. ネイティブ DOM レンダリング: React は、仮想 DOM で変更された場合にのみ、ブラウザー内の実際の DOM ノードを必要に応じて最小限に変更します。これは、実際の DOM の変更を最適化し、React を高速化する優れた React の機能です。

おすすめ記事