[解決済み】ReactJS - "setState "が呼ばれるたびにrenderが呼び出されるのですか？

質問

Reactは毎回すべてのコンポーネントとサブコンポーネントを再レンダリングするのですか？ setState() が呼び出されますか？

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

次の簡単な例では、テキストがクリックされると両方のクラスが再びレンダリングされます。ただし、onClick ハンドラは常に state を同じ値に設定します。

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

レンダーが発生するのは state のデータが変更されました。

以下は例のコードです。 JS Fiddleとして と埋め込みスニペットです。

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>

解決方法は？

Reactは、setStateが呼ばれるたびに、すべてのコンポーネントとサブコンポーネントを再レンダリングするのでしょうか？

デフォルトでは、「はい」です。

メソッドがあります。 boolean shouldComponentUpdate(object nextProps, object nextState) 各コンポーネントはこのメソッドを持っており、quot;コンポーネントを更新する必要があるかどうかを決定する役割を担っています。 レンダー 関数)?" を変更するたびに 状態 を渡すか、新しい プロップス を親コンポーネントから取得します。

の実装は自分で書くことができます。 shouldComponentUpdate しかし、デフォルトの実装は常に true を返します。つまり、常にレンダー関数を再実行することになります。

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

デフォルトでは、shouldComponentUpdateは、常にtrueを返すようになっています。 その場でステートが変更された場合の微妙なバグに注意する必要がありますが 常にステートをイミュータブルとして扱い、プロップとステートから読み取り専用にします。 を使用すれば、shouldComponentUpdateをオーバーライドできます。 古いプロップとステートを比較する実装があります。 を置換する。

質問の次の部分です。

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

レンダーと呼ばれるものには、2つの段階があります。

1. 仮想DOMのレンダリング：以下の場合 レンダー メソッドが呼び出されると、新しい 仮想ドーム の構造体を作成します。先に述べたように、この レンダー を呼び出すと、常にメソッドが呼び出されます。 setState() なぜなら shouldComponentUpdate はデフォルトで常に真を返します。つまり、デフォルトでは、Reactではここでの最適化は行われないのです。

2. ネイティブDOMレンダリング。Reactは、Virtual DOMで変更された場合のみ、必要な分だけブラウザ上の実DOMノードを変更します。これは、実DOMの変異を最適化してReactを高速化する、あの素晴らしいReactの機能です。