1.父組件傳遞值給子組件
想必這種大家都是知道的吧蜻展！都想到了用我們react中的props,那么我在這簡單的寫了小demo,請看
父組件
class Parent extends Component{
render() {
return (
<Child text="Hello" />
)
}
}
子組件
class Child extends Component{
render(){
return (
<p>{ this.props.text }</p>
)
}
}
2.子組件傳值給父組件
相必大家在這里估計得想一想吧膳算！那么由我同樣寫個小demo來告訴大家,理解了其實也不難哦
父組件
class Parent extends Component {
constructor(props) {
super(props);
this.state = {
someKey: 'world'
};
}
fn(newState) {
this.setState({ someKey: newState });
}
render() {
return (
<div>
<Child pfn={this.fn.bind(this)} />
<p>{this.state.someKey}</p>
</div>
);
}
}
子組件
class Child extends Component {
constructor(props) {
super(props);
this.state = {
newState: 'Hello'
};
}
someFn() {
this.props.pfn(this.state.newState);//這里就是傳值給父組件
}
render() {
return (
<div onClick={ this.someFn.bind(this) }>點我</div>
);
}
}
通過回調函數(shù)進行向父組件傳值断箫，并綁定父組件的this this.fn.bind(this)
3.有任何嵌套關系的組件之間傳值
如果組件之間沒有任何關系亩钟，組件嵌套層次比較深（個人認為 2 層以上已經算深了），或者你為了一些組件能夠訂閱尺碰、寫入一些信號四啰，不想讓組件之間插入一個組件，讓兩個組件處于獨立的關系驮樊。對于事件系統(tǒng)薇正，這里有 2 個基本操作步驟：訂閱（subscribe）/監(jiān)聽（listen）一個事件通知，并發(fā)送（send）/觸發(fā)（trigger）/發(fā)布（publish）/發(fā)送（dispatch）一個事件通知那些想要的組件囚衔。
下面講介紹 3 種模式來處理事件挖腰，你能 點擊這里 來比較一下它們。
簡單總結一下：
(1) Event Emitter/Target/Dispatcher
特點：需要一個指定的訂閱源
// to subscribe
otherObject.addEventListener(‘click’, function() { alert(‘click!’); });
// to dispatch
this.dispatchEvent(‘click’);
(2) Publish / Subscribe
特點：觸發(fā)事件的時候练湿，你不需要指定一個特定的源猴仑，因為它是使用一個全局對象來處理事件（其實就是一個全局廣播的方式來處理事件）
// to subscribe
globalBroadcaster.subscribe(‘click’, function() { alert(‘click!’); });
// to dispatch
globalBroadcaster.publish(‘click’);
(3) Signals
特點：與Event Emitter/Target/Dispatcher相似，但是你不要使用隨機的字符串作為事件觸發(fā)的引用肥哎。觸發(fā)事件的每一個對象都需要一個確切的名字（就是類似硬編碼類的去寫事件名字）辽俗，并且在觸發(fā)的時候，也必須要指定確切的事件篡诽。（看例子吧崖飘，很好理解）
// to subscribe
otherObject.clicked.add(function() { alert(‘click’); });
// to dispatch
this.clicked.dispatch();
在處理事件的時候，需要注意：
在 componentDidMount 事件中杈女，如果組件掛載（mounted）完成朱浴，再訂閱事件；當組件卸載（unmounted）的時候碧信，在 componentWillUnmount 事件中取消事件的訂閱赊琳。
看了上面所述,是否有所感悟
例如通過事件來進行非父子組件間的通信，如果操作不是很多砰碴，我們可以自己動手簡單實現(xiàn)以下哦躏筏！
下面我簡單的寫了一個,請看
簡單實現(xiàn)了一下 subscribe 和 dispatch
let EventEmitter = {
_events: {},
dispatch: function (event, data) {
if (!this._events[event]) { // 沒有監(jiān)聽事件
return;
}
for (var i = 0; i < this._events[event].length; i++) {
this._events[event][i](data);
}
},
subscribe: function (event, callback) {
// 創(chuàng)建一個新事件數(shù)組
if (!this._events[event]) {
this._events[event] = [];
}
this._events[event].push(callback);
}
};
otherObject.subscribe('namechanged', (data) => console.log(data.name));
this.dispatch('namechanged', { name: 'John' });
是不是現(xiàn)在覺得組件通信其實也沒那么難懂吧,加油吧，騷年
