Reactにおけるコンポーネント通信の詳細な説明

'react' から React,{Component,createRef} をインポートします。
'./Child1' から Child1 をインポートします
デフォルトクラスAppをエクスポートし、Componentを拡張します。
    コンストラクタ(props){
        スーパー(小道具)
        this.child = createRef()
    }
    与える（）{
        戻る（
            <div>
                <Child1 ref={this.child}/>
                <ボタンのonClick={this.fn.bind(this)}></ボタン>
            </div>
        ）
    }
    関数(){
        const 子 = this.child.current
        子.setTitle()
    }
}

React をインポートします。{Component} を 'react' からインポートします。
エクスポートデフォルトクラスChild1はComponentを拡張します{
    状態={
        title:'タイトル'
    }
    与える（）{
        戻る （
            <div>
                {この州のタイトル}
            </div>
        ）
    }
    タイトルを設定する(){
        this.setstate({title:'hh'})
    }
}

React をインポートし、 'react' から {createContext} を作成します。
{プロバイダー、コンシューマー} = createContext() を作成します。
輸出 { 
    プロバイダー、//パブリッシュ コンシューマー //サブスクライブ}

'react' から React 、{Component} をインポートします。
'./store' から {Provider,Consumer} をインポートします。
'./Son' から Son をインポートします
デフォルトクラスAppをエクスポートし、Componentを拡張します。
    コンストラクタ(props){
        スーパー(小道具)
        this.state={
            名前:'mingcen'
        }
    }
    与える（）{
        戻る （
            <div>
                <プロバイダー値={this.state.name}>
                    <息子/>
                </プロバイダー>
            </div>
        ）
    }
}

React をインポートします。{Component} から 'react'
'./store' から {Consumer} をインポートします。
エクスポートデフォルトクラスSon1はComponentを拡張します{
    コンストラクタ(props){
        スーパー(小道具)
        this.state={
            名前:'ううう'
        }
    }
    与える（）{
        戻る（
            <div>
                <消費者>
                   {
                        値=>{
                            <div>{値.名前}</div>
                        }
                   }
                </消費者>
            </div>
        ）
    }
}

状態={
    カウント:1,
    setCount:()=>{
        this.setState(state=>{
            戻る {
                カウント:++状態.カウント
            }
        })
    }
}
与える（）{
    {count,setCount} = this.state とします。
    戻る（
        <div>
            <プロバイダー値={{count,setCount}}>
                <Cmp1></Cmp1>
                <Cmp2></Cmp2>
            </プロバイダー>
        </div>
    ）
}

React をインポートし、{ Component 、 createContext } を 'react' から取得します。
エクスポートデフォルトクラスCmp2はComponentを拡張します{
  // デフォルトデータのみ取得 --> プロバイダーコンポーネントにラップされていません static contextType = createContext
  与える（） {
    戻る （
      <div>
        <button onClick={this.setCount.bind(this)}>データの自動増加</button>
      </div>
    ）
  }
  setCount() {
    this.context.setCount()
  }
}

<消費者>
    {
        値 => <h3>{value.count}</h3>
    }
</消費者>