前言

當我們初入React後，最容易遇到的問題就是組件間的通訊，算是第一大魔王拉，目前也只能跌跌撞撞慢慢找出攻略法。

目前看到寫比較完整的文章
參考

state、props、refs

這是React的Component 的變數設定，大概就是說
state 是Component內部的變數
props 是外部傳進Component的變數
refs 是子組件傳給父組件時用的

常用的屬性：props, state, refs
state 和 props 同樣儲存資料，有什麼差別？

Example:

下面大概寫一下react 正規class 格式：
會在construtor(props){}裡面定義this.state 這個Component 要用到的變數
當然也有一種寫法state={"apple" : "" }這種比較精簡的寫法，

    class App extends React.Components{
        construtor(props){
            super(props)
            this.state = {
                "變數名稱":型態,
                "apple" : "" ,//字串
            }
        }
        
        render(){
            return(
                <Apple value={this.state.apple}/>
            )
        }
        
    }

而下面的 就是 class App 的子組件 如果我們要傳值給
value={this.state.apple}給他，而如果要接收變數格式大概像這樣：
可以先用console.log 查一下有沒有接收到值，

    class Appple extends React.Components{
        construtor(props){
            super(props)
           
            console.log(this.props.value)
        }
        
        render(){
            return(
               
            )
        }
        
    }

這大概是基本的state、props 觀念

父子組件間的通訊

ＯＫ 這就是重點，其實我們父子組件溝通通常沒什麼大問題，只要子組件不需要更新父組件傳過來的值的話

從我開始學到現在有做過幾種作法，

Refs

參考，這大概就是說 子組件逆回傳值給父組件，這個用法現在開始捨去掉了，這不符合React的撰寫風格
一般來說，React 設計通常都是從上到下的傳值，不可以逆推

格式：

<Input refs="Input"/>

而父組件大概就是用this.Input.value收值Input 就是refs="Input"

先在父組件設變數

這是我目前的寫法，
只要先把要溝通的變數先寫好，再用props去接收
更新的話我看過有一種寫法以前也試過
直接使用props.value 然後用 this.setState({value:this.props.value})去更新

這寫法比較怪，怪再說this.setState是用來更新this.state 而這個寫法好像就是說，我直接在子組件更新父組件的this.state.value(在父組件內value是.state)

另一種寫法是上面文章的作法
跟上一個寫法一樣觀念：只是setState是在父子間處理，而傳處理父值得function給子組件

父組件：
 transferMsg(msg) {
    this.setState({
      msg
    });
  }
  render(){
  
      return( <Child_1 transferMsg = {msg => this.transferMsg(msg)} />)
  }

  

子組件：
就直接把值傳進function 自然就更新了

this.props.transferMsg('end')