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é)們骑篙!未來是屬于你們的