ReactJS-「setState」が呼び出されるとレンダーが呼び出されますか？

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>

[1]: http://jsfiddle.net/fp2tncmb/2/

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

デフォルト-はい。

方法があるshouldComponentUpdateブールは、（オブジェクトnextProps、オブジェクトnextState）各コンポーネントは、このメソッドを持っており、それを判断するために責任だ、「必要があるコンポーネントのアップデートを（実行はレンダリング機能）？」状態を変更するか、親コンポーネントから新しい小道具を渡すたびに。

コンポーネントのshouldComponentUpdateメソッドの独自の実装を作成できますが、デフォルトの実装は常にtrueを返します。つまり、常にレンダリング関数を再実行します。

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

デフォルトでは、shouldComponentUpdateは常にtrueを返し、状態が変更されたときに微妙なバグを防ぎますが、常に状態を不変として扱い、properとrender（）の状態から読み取り専用にする場合は、shouldComponentUpdateを次のようにオーバーライドできます。古い小道具と状態をそれらの代替品と比較する実装。

あなたの質問の次の部分：

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

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

1. 仮想DOMレンダリング：renderメソッドが呼び出されると、コンポーネントの新しい仮想 DOM 構造が返されます。前述したように、このrenderメソッドはsetState（）を呼び出すときに常に呼び出されます。shouldComponentUpdateはデフォルトで常にtrueを返すためです。そのため、デフォルトでは、Reactには最適化はありません。

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

いいえ、状態が変化しても、Reactはすべてをレンダリングするわけではありません。

• コンポーネントがダーティ（状態が変化）になると、そのコンポーネントとその子が再レンダリングされます。これは、ある程度、再レンダリングをできるだけ少なくするためです。renderが呼び出されないのは、一部のブランチが別のルートに移動されたときだけです。理論的には、何も再レンダリングする必要はありません。あなたの例でTimeInChildは、はの子コンポーネントでMainあるため、状態がMain変化したときにも再レンダリングされます。

• Reactは状態データを比較しません。ときにsetState呼び出され、ダーティとしてマークこと成分（意味し、それは、再レンダリングする必要があります）。注意すべき重要な点はrender、コンポーネントのメソッドが呼び出されても、出力が現在のDOMツリー（仮想DOMツリーとドキュメントのDOMツリーの違い）と異なる場合にのみ、実際のDOMが更新されることです。あなたの例では、stateデータは変更されていませんが、最後の変更時刻が変更されているため、仮想DOMはドキュメントのDOMと異なり、HTMLが更新されます。

ここでは他の多くの回答に記載されていますが、コンポーネントは次のいずれかである必要があります。

• shouldComponentUpdate状態またはプロパティが変更されたときにのみレンダリングするように実装する

• PureComponentの拡張に切り替えshouldComponentUpdateます。これは、浅い比較のために内部でメソッドをすでに実装しています。

を使用した例を次にshouldComponentUpdate示します。これは、この単純な使用例とデモ目的でのみ機能します。これを使用すると、コンポーネントはクリックするたびに再レンダリングされなくなり、最初に表示されたときと、一度クリックされた後にレンダリングされます。

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'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    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>

はい。「shouldComponentUpdate」がfalseを返す場合、代わりにsetStateを呼び出すたびにrender（）メソッドを呼び出します。

「更新が失われた」もう1つの理由は次の場合があります。

• 静的なgetDerivedStateFromPropsが定義されている場合、公式ドキュメントhttps://reactjs.org/docs/react-component.html#updatingに従って、すべての更新プロセスで再実行されます。。
• その状態値が最初に小道具から来ている場合、すべての更新で上書きされます。

それが問題である場合、Uは更新中に状態の設定を回避できます。このように状態パラメーター値を確認する必要があります

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

別の解決策は、初期化されたプロパティを状態に追加し、最初に設定することです（状態がnull以外の値に初期化されている場合）。

すべてのコンポーネントではありません。

の state全体APPの状態の滝の源のようなコンポーネントルックスインチ

したがって、変更はsetStateが呼び出された場所から発生します。rendersそこから木が呼ばれる。純粋なコンポーネントを使用している場合renderは、スキップされます。