有時(shí)候 state 是需要定義在 child 組件的，比如彈窗， CheckBox 這種開(kāi)關(guān)性質(zhì)的，邏輯是重復(fù)的，state 定義在組件內(nèi)部更好維護(hù)， 復(fù)用性更好。但是 child 的 state 是需要告知我的 parent 組件的， 同樣還是執(zhí)行 parent 傳下來(lái)的 change 函數(shù)。
兄弟組件
有時(shí)候可能出現(xiàn)頁(yè)面中的某兩部分通信，比如省市的級(jí)聯(lián)選擇，點(diǎn)擊 button 改變顏色等等，組件并不是父子級(jí)，沒(méi)有嵌套關(guān)系的時(shí)候。這種時(shí)候通常是依賴共有的頂級(jí) Container 處理或者第三方的狀態(tài)管理器。其實(shí)原理都是相通的，兄弟 A 的 value 發(fā)生變化，分發(fā)的時(shí)候把 value 值告訴一個(gè)中間者 C ，C 會(huì)自動(dòng)告知 B，實(shí)現(xiàn) B 的自動(dòng)render 。
// 發(fā)布訂閱類(lèi)
class EventEmitter {
_event = {}
// on 函數(shù)用于綁定
on(eventName, handle) {
let listeners = this._event[eventName];
if(!listeners || !listeners.length) {
this._event[eventName] = [handle];
return;
}
listeners.push(handle);
}
// off 用于移除
off(eventName, handle) {
let listeners = this._event[eventName];
this._event[eventName] = listeners.filter(l => l !== handle);
}
// emit 用于分發(fā)消息
emit(eventName, ...args) {
const listeners = this._event[eventName];
if(listeners && listeners.length) {
for(const l of listeners) {
l(...args);
}
}
}
}
const event = new EventEmitter;
export { event };
// Container
import A from './a';
import B from './b';
const Listener = () => {
return (
);
};
export default Listener;
// 兄弟組件 A
import { event } from './eventEmitter';
class A extends Component {
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
event.emit('dispatch', this.value);
}
render() {
return (
我是Brother A, 通知
)
}
}
// 兄弟組件 B
import { event } from './eventEmitter';
class B extends Component {
state = {
value: ''
}
componentDidMount() {
event.on('dispatch', this.valueChange);
}
componentWillUnmount() {
event.off('dispatch', this.valueChange);
}
valueChange = value => {
this.setState({
value,
})
}
render() {
return (
我是Brother B, value是：
{this.state.value}
);
}
}
仍然是組件 A 用于分發(fā)消息，組件 B 去接收消息。這里的中間者其實(shí)就是 event 對(duì)象。需要接收消息的 B 去訂閱 dispatch 事件，并把回調(diào)函數(shù) valueChange 傳入，另外 B 定義了自己的 state，方便得到 value 值的時(shí)候自動(dòng)渲染。組件 A 其實(shí)就是把內(nèi)部的表單 value 在點(diǎn)擊的時(shí)候分發(fā)，發(fā)布事件，從而 B 中的 valueChange 執(zhí)行，改變 state。這種方式比較方便，也更直觀，不需要借助 Container 組件去實(shí)現(xiàn)，省去了很多邏輯。
重慶分公司
重慶分公司
