this.props.childrenない親状態変化

Question

に再レンダリング私はコード

import React, {Component} from 'react'; 

class App extends Component { 
    render() { 
    return (
     <Container> 
     <Child/> 
     </Container> 
    ) 
    } 
} 

class Container extends Component { 
    render() { 
    console.log('Container render'); 
    return (
     <div onClick={() => this.setState({})}> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

class Child extends Component { 
    render() { 
    console.log('Child render'); 
    return <h1>Hi</h1> 
    } 
} 

export default App; 

の部分を持っている「こんにちは」をクリックすると、MSG、唯一Containerコンポーネントを再レンダリングし続けるが、Childコンポーネントを再ではありません - レンダリングされる。

なぜChildコンポーネントが再レンダリングされないのですかContainer状態が変わりましたか？

私はそれが原因それはContainerコンポーネントのプロパティであることには発生しませんが、それでもthis.props.childはJSXでChildコンポーネントに評価され、その確認されていないことを理由でしょう。

<div onClick={() => this.setState({})}> 
    {this.props.children} 
</div> 

フル例https://codesandbox.io/s/529lq0rv2n（コンソールログを確認）

Answer 1

小道具が変更されていないので、<Child />成分が再レンダリングされません。 Reactは、コンポーネントとそのデータを表す仮想DOMの概念を使用します。

コンポーネントの小道具が変更されない場合、コンポーネントは再レンダリングされません。これがReactを速く保つものです。

例では、Childに送信されたプロップはないので、決して再レンダリングされません。あなたはそれが（なぜだろう？）再レンダリングするたびにしたい場合は、例えば、純粋な機能を使用することができます

const Child =() => <h1>Hi</h1>; 

Answer 2

変更{this.props.children}<Child />にコンテナコンポーネントでは、（今、あなたは、Appコンポーネントから<Child />を削除することができます） 。

divをクリックすると、コンソールに「子レンダリング」と「コンテナレンダリング」の両方が表示されます。

（この例ではあなたの子供は静的なコンポーネントです。）