react系列--組件通信 __veblen
在項(xiàng)目開發(fā)過程中枉证，為了降低耦合度矮男，我們會采用組件開發(fā)模式，這就衍生出來各組件之間的通信室谚。
組件通信大致分為三種形式：
- 父=====>子
- 子=====>父
- 兄弟之間
更復(fù)雜的通信方式如父=====>孫毡鉴，則建議使用redux，詳見react系列--redux
1.父子組件通信（父===>子）
說到組件通信秒赤，先來介紹下單向數(shù)據(jù)流：
React是單向數(shù)據(jù)流猪瞬，數(shù)據(jù)主要從父節(jié)點(diǎn)傳遞到子節(jié)點(diǎn)（通過props）。 如果頂層（父級）的某個props改變了入篮，React會重渲染所有的子節(jié)點(diǎn)陈瘦。
Props： props是property的縮寫，可以理解為HTML標(biāo)簽的attribute潮售。 不可以使用this.props直接修改props痊项，因?yàn)閜rops是只讀的，props是用于整個組件樹中傳遞數(shù)據(jù)和配置酥诽。在當(dāng)前組件訪問props线婚，使用this.props。
接下來說說state
每個組件都有屬于自己的state盆均，state和props的區(qū)別在于前者(state)只存在于組件內(nèi)部塞弊，只能從當(dāng)前組件調(diào)用this.setState修改state值（不可以直接修改this.state！）。 一般我們更新子組件都是通過改變state值游沿，更新子組件的props值從而達(dá)到更新饰抒。
父組件更新組件狀態(tài) -----props-----> 子組件更新
- 靜態(tài)數(shù)據(jù)傳遞
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')
);
- 動態(tài)數(shù)據(jù)傳遞
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，當(dāng)點(diǎn)擊button的時候通過setState更改state.name的值為len诀黍，Child視圖對應(yīng)更新
2.父子組件通信（子===>父）
子組件更新父組件狀態(tài) -----需要父組件傳遞回調(diào)函數(shù)-----> 子組件調(diào)用觸發(fā)
- 修改上述代碼如下
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')
);
當(dāng)點(diǎn)擊子組件時袋坑，觸發(fā)從父組件傳遞過來的回調(diào)函數(shù)。
- 如果需要往父組件傳參怎么辦眯勾？修改以上代碼如下
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')
);
這樣枣宫，父組件就可以接收到子組件傳遞過來的參數(shù)了
兄弟組件
方式一：
按照React單向數(shù)據(jù)流方式，我們需要借助父組件進(jìn)行傳遞吃环，通過父組件回調(diào)函數(shù)改變兄弟組件的props也颤。其實(shí)這種實(shí)現(xiàn)方式與子組件更新父組件狀態(tài)的方式是大同小異的。
方式二：
猛擊here
以上就是react組件通信的講解郁轻。如果看懂了翅娶，說明你聰明；看不懂好唯，說明我講的不好竭沫。加油，同學(xué)們骑篙！未來是屬于你們的
