詳解React中的組件通信問(wèn)題
引入
本來(lái)我是沒(méi)想過(guò)總結(jié)這些東西的，會(huì)感覺(jué)比較入門。但是之前同學(xué)去騰訊面試問(wèn)到了這個(gè)問(wèn)題(react或vue的組件通信)，我?guī)退恚槺銓慸emo的過(guò)程中，會(huì)有一些新的體會(huì)，多總結(jié)還是有利于進(jìn)步的呀。
父子組件
父 → 子
parent組件傳給child組件，符合react的單向數(shù)據(jù)流理念，自上到下傳遞props。
// 父組件
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
this.setState({
value: this.value,
})
}
render() {
return (
<div>
我是parent
<input onChange={this.handleChange} />
<div className="button" onClick={this.handleClick}>通知</div>
<div>
<Child value={this.state.value} />
</div>
</div>
);
}
}
// 子組件
class Child extends Component {
render() {
const { value } = this.props;
return (
<div>
我是Child，得到傳下來(lái)的值：{value}
</div>
);
}
}
父組件做的就是定義好 state ，定義好事件函數(shù)，input onChange 的時(shí)候，去緩存 value 值，然后點(diǎn)擊 button 的時(shí)候，改變 state , 子組件只負(fù)責(zé)展示 value 。
子 → 父
child 組件通知 parent 組件， 主要是依靠 parent 傳下來(lái)的 callback 函數(shù)執(zhí)行，改變 parent 組件的狀態(tài)，或者把 child 自己的 state 通知 parent 。分兩種情況：
state 定義在 parent 組件
// parent
class Parent extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
<div>
<div>我是parent, Value是：{this.state.value}</div>
<Child setValue={this.setValue} />
</div>
);
}
}
class Child extends Component {
handleChange = e => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
<div>
我是Child
<div className="card">
state 定義在 parent
<input onChange={this.handleChange} />
<div className="button" onClick={this.handleClick}>通知</div>
</div>
</div>
);
}
}
parent 組件把改變 state 的 setValue 函數(shù)傳給 child ，child 組件自己處理內(nèi)部的狀態(tài)（這里是表單的value值），當(dāng) child 組件分發(fā)消息的時(shí)候， 執(zhí)行 parent 的 setValue 函數(shù)，從而改變了 parent 的 state，state發(fā)生變化， parent 組件執(zhí)行 re-render 。
state 定義在 child 組件
// parent
class Parent extends Component {
onChange = value => {
console.log(value, '來(lái)自 child 的 value 變化');
}
render() {
return (
<div>
<div>我是parent
<Child onChange={this.onChange} />
</div>
);
}
}
class Child extends Component {
constructor() {
super();
this.state = {
childValue: ''
}
}
childValChange = e => {
this.childVal = e.target.value;
}
childValDispatch = () => {
const { onChange } = this.props;
this.setState({
childValue: this.childVal,
}, () => { onChange(this.state.childValue) })
}
render() {
return (
<div>
我是Child
<div className="card">
state 定義在 child
<input onChange={this.childValChange} />
<div className="button" onClick={this.childValDispatch}>通知</div>
</div>
</div>
);
}
}
有時(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 。
利用共有的Container
// container
class Container extends Component {
constructor() {
super();
this.state = {
value: '',
}
}
setValue = value => {
this.setState({
value,
})
}
render() {
return (
<div>
<A setValue={this.setValue}/>
<B value={this.state.value} />
</div>
);
}
}
// 兄弟A
class A extends Component {
handleChange = (e) => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.props;
setValue(this.value);
}
render() {
return (
<div className="card">
我是Brother A, <input onChange={this.handleChange} />
<div className="button" onClick={this.handleClick}>通知</div>
</div>
)
}
}
// 兄弟B
const B = props => (
<div className="card">
我是Brother B, value是：
{props.value}
</div>
);
export default B;
組件 A 中的表單 value 值，告知了父級(jí) Container 組件（通過(guò) setValue 函數(shù)改變 state），組件 B 依賴于 Container 傳下來(lái)的 state，會(huì)做出同步更新。這里的中間者是 Container。
利用Context
上面的方式，如果嵌套少還可以，如果嵌套特別多，比如一級(jí)導(dǎo)航欄下的二級(jí)導(dǎo)航欄下的某個(gè)按鈕，要改變頁(yè)面中 content 區(qū)域的 table 里的某個(gè)列的值...他們同屬于一個(gè) page 。這樣傳遞 props 就會(huì)很痛苦，每一層組件都要傳遞一次。
// 頂級(jí)公共組件
class Context extends Component {
constructor() {
super();
this.state = {
value: '',
};
}
setValue = value => {
this.setState({
value,
})
}
getChildContext() { // 必需
return {
value: this.state.value,
setValue: this.setValue,
};
}
render() {
return (
<div>
<AParent />
<BParent />
</div>
);
}
}
// 必需
Context.childContextTypes = {
value: PropTypes.string,
setValue: PropTypes.func,
};
// A 的 parent
class AParent extends Component {
render() {
return (
<div className="card">
<A />
</div>
);
}
}
// A
class A extends Component {
handleChange = (e) => {
this.value = e.target.value;
}
handleClick = () => {
const { setValue } = this.context;
setValue(this.value);
}
render() {
return (
<div>
我是parentA 下的 A, <input onChange={this.handleChange} />
<div className="button" onClick={this.handleClick}>通知</div>
</div>
);
}
}
// 必需
A.contextTypes = {
setValue: PropTypes.func,
};
// B 的 parent
class BParent extends Component {
render() {
return (
<div className="card">
<B />
</div>
);
}
}
// B
class B extends Component {
render() {
return (
<div>
我是parentB 下的 B, value是：
{this.context.value}
</div>
);
}
}
B.contextTypes = {
value: PropTypes.string,
};
組件 A 仍是 消息的發(fā)送者，組件 B 是接收者， 中間者是 Context 公有 Container 組件。context是官方文檔的一個(gè) API ，通過(guò) getChildContext 函數(shù)定義 context 中的值，并且還要求 childContextTypes 是必需的。這樣屬于這個(gè) Container 組件的子組件，通過(guò) this.context 就可以取到定義的值，并且起到跟 state 同樣的效果。中間者其實(shí)還是 Container，只不過(guò)利用了上下文這樣的 API ，省去了 props 的傳遞。另外：這個(gè)功能是實(shí)驗(yàn)性的，未來(lái)可能會(huì)有所改動(dòng)。
發(fā)布訂閱
這種一個(gè)地方發(fā)送消息，另一個(gè)地方接收做出變化的需求，很容易想到的就是觀察者模式了。具體的實(shí)現(xiàn)會(huì)有很多種，這里我們自己寫了一個(gè) EventEmitter 的類（其實(shí)就是仿照 node 中的 EventEmitter 類），如果不了解觀察者，可以看我的另一篇文章 觀察者模式 。
// 發(fā)布訂閱類
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 (
<div>
<A />
<B />
</div>
);
};
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 (
<div className="card">
我是Brother A, <input onChange={this.handleChange} />
<div className="button" onClick={this.handleClick}>通知</div>
</div>
)
}
}
// 兄弟組件 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 (
<div className="card">
我是Brother B, value是：
{this.state.value}
</div>
);
}
}
仍然是組件 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)，省去了很多邏輯。
Redux || Mobx
Redux 或者 Mobx 是第三方的狀態(tài)管理器，是這里我們通信的中間者。大型項(xiàng)目最直接的就是上庫(kù)... 更方便，更不容易出錯(cuò)。 但其實(shí)小項(xiàng)目就沒(méi)什么必要了。東西比較多，這里不再闡述它們的實(shí)現(xiàn)和做了什么。
總結(jié)
react 特殊的自上而下的單向數(shù)據(jù)流，和 state 的特性，造就以這樣的思想實(shí)現(xiàn)組件通信。除去發(fā)布訂閱和 Redux 等，其他的都是 props 自上而下傳遞的理念，子組件需要的總是通過(guò)父組件傳遞下來(lái)的，關(guān)于 state 的定義，還是看具體的應(yīng)用場(chǎng)景了。
另外本次的代碼都放在https://github.com/sunyongjian/rc-communication-demo， 可以 done 下來(lái)加深理解。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
路由的配置文件目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來(lái)完成的，路由的參數(shù)傳遞有二種方式這，兩種方式在Router6.x中都是提供的hook函數(shù)的API,?類組件需要通過(guò)高階組件的方式使用，本文通過(guò)示例代碼詳解講解，需要的朋友參考下吧2022-11-11
react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參的實(shí)例詳解
這篇文章主要介紹了react-native中路由頁(yè)面的跳轉(zhuǎn)與傳參,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08
React實(shí)現(xiàn)模糊搜索和關(guān)鍵字高亮的示例代碼
這篇文章主要為大家詳細(xì)介紹了React如何實(shí)現(xiàn)模糊搜索和關(guān)鍵字高亮的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11
詳解React中多種組件通信方式的實(shí)現(xiàn)
在React中,組件之間的通信是一個(gè)非常重要的話題,React提供了幾種方式來(lái)實(shí)現(xiàn)跨組件通信,下面小編將詳細(xì)講講其中幾種通信方式,并提供實(shí)際的代碼示例,需要的可以參考下2023-11-11
React創(chuàng)建虛擬DOM的兩種方式小結(jié)
本文主要介紹了兩種創(chuàng)建React虛擬DOM的方式,包括JS方式和jsx方式,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
學(xué)習(xí)ahooks useRequest并實(shí)現(xiàn)手寫
這篇文章主要為大家介紹了學(xué)習(xí)ahooks useRequest并實(shí)現(xiàn)手寫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
react-native消息推送實(shí)現(xiàn)方式
這篇文章主要介紹了react-native消息推送實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Context提供了一個(gè)無(wú)需為每層組件手動(dòng)添加props，就能在組件樹(shù)間進(jìn)行數(shù)據(jù)傳遞的方法。在一個(gè)典型的 React 應(yīng)用中，數(shù)據(jù)是通過(guò)props屬性自上而下（由父及子）進(jìn)行傳遞的，但這種做法對(duì)于某些類型的屬性而言是極其繁瑣的2022-11-11
這篇文章主要介紹了React中組件之間通信的方式,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-07-07
react中的ref類似于vue中的ref,都是可以操作dom的,這篇文章我們通過(guò)一個(gè)demo來(lái)學(xué)習(xí)這個(gè)屬性,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下2023-08-08