在項目開發過程中，為了降低耦合度，我們會采用組件開發模式，這就衍生出來各組件之間的通信。

組件通信大致分為三種形式：

• 父=====>子
• 子=====>父
• 兄弟之間

更復雜的通信方式如父=====>孫，則建議使用redux，詳見react系列--redux

1.父子組件通信（父===>子）

說到組件通信，先來介紹下單向數據流：

React是單向數據流，數據主要從父節點傳遞到子節點（通過props）。
如果頂層（父級）的某個props改變了，React會重渲染所有的子節點。

Props：
props是property的縮寫，可以理解為HTML標簽的attribute。
不可以使用this.props直接修改props，因為props是只讀的，props是用于整個組件樹中傳遞數據和配置。在當前組件訪問props，使用this.props。

接下來說說state

每個組件都有屬于自己的state，state和props的區別在于前者(state)只存在于組件內部，只能從當前組件調用this.setState修改state值（不可以直接修改this.state?。?br> 一般我們更新子組件都是通過改變state值，更新子組件的props值從而達到更新。

父組件更新組件狀態 -----props----->　子組件更新

• 靜態數據傳遞

var Parent = React.createClass({  
         render: function() {  
                  return <div>teacher's name is: <Child name="veb"></Child></div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  
  
React.render(  
        <Parent />,  
        document.getElementById('app')  
);  

• 動態數據傳遞

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is: <Child name={this.state.name}></Child>
                              <button onClick="{this.change}" ></button>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <span>{this.props.name}</span>;  
         }  
});  
  
React.render(  
        <Parent />,  
        document.getElementById('app')  
);  

Child組件接收父組件state.name，當點擊button的時候通過setState更改state.name的值為len，Child視圖對應更新

2.父子組件通信（子===>父）

子組件更新父組件狀態 -----需要父組件傳遞回調函數-----> 子組件調用觸發

• 修改上述代碼如下

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(){
                  this.setState({name:"len"})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         render: function() {  
                  return <button onClick={this.props.ev} ></button>;  
         }  
});  
  
React.render(  
        <Parent />,  
        document.getElementById('app')  
);  

當點擊子組件時，觸發從父組件傳遞過來的回調函數。

• 如果需要往父組件傳參怎么辦？修改以上代碼如下

var Parent = React.createClass({  
          getInitialState: function() {  
                  return {  
                        name: "veb"  
                  }  
          },  
         change:function(name){
                  this.setState({name:name})
         },
         render: function() {  
                  return <div>
                              teacher's name is:{this.state.name}
                             <Child ev={this.change}></Child>
                    </div>;  
         }  
});  
var Child = React.createClass({  
         toParent:function(name){
                this.props.ev(name)
         },
         render: function() {  
                  return <button onClick={this.toParent.bind(this,"veblen')}></button>; 
         }  
});  
  
React.render(  
        <Parent />,  
        document.getElementById('app')  
);  

這樣，父組件就可以接收到子組件傳遞過來的參數了

兄弟組件

方式一：

按照React單向數據流方式，我們需要借助父組件進行傳遞，通過父組件回調函數改變兄弟組件的props。其實這種實現方式與子組件更新父組件狀態的方式是大同小異的。

方式二：

猛擊here

以上就是react組件通信的講解。如果看懂了，說明你聰明；看不懂，說明我講的不好。加油，同學們！未來是屬于你們的 歡迎光臨個人站清風筆記