深入淺析React組件間通訊的10種方法

【相關教學推薦：React影片教學】

這兩天被臨時抽調到別的專案組去做一個小專案的迭代。這個專案前端是用React，只是一個小型專案所以並沒有使用Redux等狀態管理的函式庫。剛好遇到了一個小問題：兩個不太相關的元件到底該怎麼進行通訊。我覺得這個問題還蠻有趣的，所以把我的思考過程寫下來，大家也可以一起討論討論。

雖然重點是要講兩個不相關的組件間的通信，但我還是從最常見的父子組件通信講起，大家就當溫故而知新了。先把完整的總結列出來，然後再詳細展開。

元件間通訊方式總結

• 父元件=> 子元件：

  1. Props
  2. Instance Methods

• 子元件=> 父元件：

  1. #Callback Functions
  2. Event Bubbling

• #兄弟元件之間：

  1. Parent Component

• 比較不相關的元件之間：

  1. Context
  2. Portals
  3. Global Variables
  4. #Observer Pattern
  5. Redux等

2. # #1. Props這是最常見的react元件之間傳遞訊息的方法了吧，父元件透過props把資料傳給子元件，子元件透過this.props
去使用對應的資料

3. const Child = ({ name }) => {
       <div>{name}</div>
   }
   
   class Parent extends React.Component {
       constructor(props) {
           super(props)
           this.state = {
               name: &#39;zach&#39;
           }
       }
       render() {
           return (
               <Child name={this.state.name} />
           )
       }
   }

   2. Instance Methods
第二種父元件傳遞訊息給子元件的方式有些同學可能會比較陌生，但這種方式非常有用，請務必掌握。原理就是：父元件可以透過使用

refs

來直接呼叫子元件實例的方法，看下面的例子：

class Child extends React.Component {
  myFunc() {
    return "hello"
  }
}

class Parent extends React.Component {
  componentDidMount() {
    var x = this.foo.myFunc()   // x is now 'hello'
  }
  render() {
    return (
      <Child
        ref={foo => {
          this.foo = foo
        }}
      />
    )
  }
}

大致的過程：

首先子元件有一個方法myFunc

父元件給子元件傳遞一個ref屬性，並且採用

callback-refs

的形式。這個callback函數接收react元件實例/原生dom元素作為它的參數。當父元件掛載時，react會去執行這個ref回呼函數，並將子元件實例作為參數傳給回呼函數，然後我們把子元件實例賦值給

this.foo

。

最後我們在父元件當中就可以使用

this.foo

來呼叫子元件的方法咯

了解了這個方法的原理後，我們要考慮的問題就是為啥我們要用這種方法，它的使用場景是什麼？最常見的一種使用場景：例如子元件是一個modal彈跳視窗元件，子元件裡有顯示/隱藏這個modal彈跳視窗的各種方法，我們就可以透過使用這個方法，直接在父元件上呼叫子元件實例的這些方法來操控子組件的顯示/隱藏。這種方法比起你傳遞一個控制modal顯示/隱藏的props給子組件要美觀多了。

class Modal extends React.Component {
  show = () => {// do something to show the modal}
  hide = () => {// do something to hide the modal}
  render() {
    return <div>I&#39;m a modal</div>
  }
}

class Parent extends React.Component {
  componentDidMount() {
    if(// some condition) {
        this.modal.show()
    }
  }
  render() {
    return (
      <Modal
        ref={el => {
          this.modal = el
        }}
      />
    )
  }
}

3. Callback Functions

講完了父元件給子元件傳遞訊息的兩種方式，我們再來講子元件給父元件傳遞訊息的方法。回呼函數這個方法也是react最常見的一種方式，子元件透過呼叫父元件傳來的回呼函數，從而將資料傳給父元件。

const Child = ({ onClick }) => {
    <div onClick={() => onClick(&#39;zach&#39;)}>Click Me</div>
}

class Parent extends React.Component {
    handleClick = (data) => {
        console.log("Parent received value from child: " + data)
    }
    render() {
        return (
            <Child onClick={this.handleClick} />
        )
    }
}

4. Event Bubbling

###這種方法其實跟react本身沒有關係，我們利用的是原生dom元素的事件冒泡機制。 ###

class Parent extends React.Component {
  render() {
    return (
      <div onClick={this.handleClick}>
         <Child />
      </div>
    );
  }
  handleClick = () => {
    console.log(&#39;clicked&#39;)
  }
}
function Child {
  return (
    <button>Click</button>
  );    
}

###巧妙的利用下事件冒泡機制，我們就可以很方便的在父組件的元素上接收到來自子組件元素的點擊事件######5. Parent Component### ###講完了父子組件間的通信，再來看非父子組件之間的通信方法。一般來說，兩個非父子組件想要通信，首先我們可以看看它們是否是兄弟組件，即它們是否在同一個父組件下。如果不是的話，考慮下用一個組件把它們包裹起來從而變成兄弟組件是否合適。這樣一來，它們就可以透過父元件作為中間層來實現資料互通了。 ###

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0}
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return (
      <div>
        <SiblingA
          count={this.state.count}
        />
        <SiblingB
          onClick={this.setCount}
        />
      </div>
    );
  }

}

###6. Context######通常一個前端應用會有一些"全局"性質的數據，例如當前登陸的用戶資訊、ui主題、用戶選擇的語言等等。這些全域數據，很多元件可能都會用到，當元件層級很深時，用我們之前的方法，就得透過props一層一層傳遞下去，這顯然太麻煩了，看下面的範例：###

class App extends React.Component {
  render() {
    return <Toolbar theme="dark" />;
  }
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton theme={props.theme} />
    </div>
  );
}

class ThemedButton extends React.Component {
  render() {
    return <Button theme={this.props.theme} />;
  }
}

###上面的例子，為了讓我們的Button元素拿到主題色，我們必須把theme當作props，從App傳到Toolbar，再從Toolbar傳到ThemedButton，最後Button從父元件ThemedButton的props裡終於拿到了主題theme。假如我們不同元件裡都有用到Button，就得把theme向這個例子一樣到處層層傳遞，麻煩至極。 ######因此react為我們提供了一個新api：Context，我們用Context改寫下上例###

const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

###簡單的解析一下：###

1. React.createContext创建了一个Context对象，假如某个组件订阅了这个对象，当react去渲染这个组件时，会从离这个组件最近的一个Provider组件中读取当前的context值
2. Context.Provider: 每一个Context对象都有一个Provider属性，这个属性是一个react组件。在Provider组件以内的所有组件都可以通过它订阅context值的变动。具体来说，Provider组件有一个叫value的prop传递给所有内部组件，每当value的值发生变化时，Provider内部的组件都会根据新value值重新渲染

3. 那内部的组件该怎么使用这个context对象里的东西呢？
   a. 假如内部组件是用class声明的有状态组件：我们可以把Context对象赋值给这个类的属性contextType，如上面所示的ThemedButton组件

       class ThemedButton extends React.Component {
         static contextType = ThemeContext;
         render() {
           const value = this.context
           return <Button theme={value} />;
         }
       }

   b. 假如内部组件是用function创建的无状态组件：我们可以使用Context.Consumer，这也是Context对象直接提供给我们的组件，这个组件接受一个函数作为自己的child，这个函数的入参就是context的value，并返回一个react组件。可以将上面的ThemedButton改写下：

       function ThemedButton {
           return (
               <ThemeContext.Consumer>
                   {value => <Button theme={value} />}
               </ThemeContext.Consumer>
           )
       }

最后提一句，context对于解决react组件层级很深的props传递很有效，但也不应该被滥用。只有像theme、language等这种全局属性（很多组件都有可能依赖它们）时，才考虑用context。如果只是单纯为了解决层级很深的props传递，可以直接用component composition

7. Portals

Portals也是react提供的新特性，虽然它并不是用来解决组件通信问题的，但因为它也涉及到了组件通信的问题，所以我也把它列在我们的十种方法里面。

Portals的主要应用场景是：当两个组件在react项目中是父子组件的关系，但在HTML DOM里并不想是父子元素的关系。

举个例子，有一个父组件Parent，它里面包含了一个子组件Tooltip，虽然在react层级上它们是父子关系，但我们希望子组件Tooltip渲染的元素在DOM中直接挂载在body节点里，而不是挂载在父组件的元素里。这样就可以避免父组件的一些样式（如overflow:hidden、z-index、position等）导致子组件无法渲染成我们想要的样式。

如下图所示，父组件是这个红色框的范围，并且设置了overflow:hidden，这时候我们的Tooltip元素超出了红色框的范围就被截断了。

怎么用portals解决呢？

首先，修改html文件，给portals增加一个节点

<html>
    <body>
        <div id="react-root"></div>
        <div id="portal-root"></div>
    </body>
</html>

然后我们创建一个可复用的portal容器，这里使用了react hooks的语法，看不懂的先过去看下我另外一篇讲解react hooks的文章：30分钟精通React今年最劲爆的新特性——React Hooks

import { useEffect } from "react";
import { createPortal } from "react-dom";

const Portal = ({children}) => {
  const mount = document.getElementById("portal-root");
  const el = document.createElement("div");

  useEffect(() => {
    mount.appendChild(el);
    return () => mount.removeChild(el);
  }, [el, mount]);

  return createPortal(children, el)
};

export default Portal;

最后在父组件中使用我们的portal容器组件，并将Tooltip作为children传给portal容器组件

const Parent = () => {
  const [coords, setCoords] = useState({});

  return <div style={{overflow: "hidden"}}>
      <Button>
        Hover me
      </Button>
      <Portal>
        <Tooltip coords={coords}>
          Awesome content that is never cut off by its parent container!
         </Tooltip>
      </Portal>
  </div>
}

这样就ok啦，虽然父组件仍然是overflow: hidden，但我们的Tooltip再也不会被截断了，因为它直接超脱了，它渲染到body节点下的<div id="portal-root"></div>里去了。

总结下适用的场景: Tooltip、Modal、Popup、Dropdown等等

8. Global Variables

哈哈，这也不失为一个可行的办法啊。当然你最好别用这种方法。

class ComponentA extends React.Component {
    handleClick = () => window.a = 'test'
    ...
}
class ComponentB extends React.Component {
    render() {
        return <div>{window.a}</div>
    }
}

9. Observer Pattern

观察者模式是软件设计模式里很常见的一种，它提供了一个订阅模型，假如一个对象订阅了某个事件，当那个事件发生的时候，这个对象将收到通知。

这种模式对于我们前端开发者来说是最不陌生的了，因为我们经常会给某些元素添加绑定事件，会写很多的event handlers，比如给某个元素添加一个点击的响应事件elm.addEventListener('click', handleClickEvent)，每当elm元素被点击时，这个点击事件会通知elm元素，然后我们的回调函数handleClickEvent会被执行。这个过程其实就是一个观察者模式的实现过程。

那这种模式跟我们讨论的react组件通信有什么关系呢？当我们有两个完全不相关的组件想要通信时，就可以利用这种模式，其中一个组件负责订阅某个消息，而另一个元素则负责发送这个消息。javascript提供了现成的api来发送自定义事件: CustomEvent，我们可以直接利用起来。

首先，在ComponentA中，我们负责接受这个自定义事件：

class ComponentA extends React.Component {
    componentDidMount() {
        document.addEventListener('myEvent', this.handleEvent)
    }
    componentWillUnmount() {
        document.removeEventListener('myEvent', this.handleEvent)
    }
    
    handleEvent = (e) => {
        console.log(e.detail.log)  //i'm zach
    }
}

然后，ComponentB中，负责在合适的时候发送该自定义事件：

class ComponentB extends React.Component {
    sendEvent = () => {
        document.dispatchEvent(new CustomEvent('myEvent', {
          detail: {
             log: "i'm zach"
          }
        }))
    }
    
    render() {
        return <button onClick={this.sendEvent}>Send</button>
    }
}

这样我们就用观察者模式实现了两个不相关组件之间的通信。当然现在的实现有个小问题，我们的事件都绑定在了document上，这样实现起来方便，但很容易导致一些冲突的出现，所以我们可以小小的改良下，独立一个小模块EventBus专门这件事：

class EventBus {
    constructor() {
        this.bus = document.createElement('fakeelement');
    }

    addEventListener(event, callback) {
        this.bus.addEventListener(event, callback);
    }

    removeEventListener(event, callback) {
        this.bus.removeEventListener(event, callback);
    }

    dispatchEvent(event, detail = {}){
        this.bus.dispatchEvent(new CustomEvent(event, { detail }));
    }
}

export default new EventBus

然后我们就可以愉快的使用它了，这样就避免了把所有事件都绑定在document上的问题：

import EventBus from './EventBus'
class ComponentA extends React.Component {
    componentDidMount() {
        EventBus.addEventListener('myEvent', this.handleEvent)
    }
    componentWillUnmount() {
        EventBus.removeEventListener('myEvent', this.handleEvent)
    }
    
    handleEvent = (e) => {
        console.log(e.detail.log)  //i'm zach
    }
}
class ComponentB extends React.Component {
    sendEvent = () => {
        EventBus.dispatchEvent('myEvent', {log: "i'm zach"}))
    }
    
    render() {
        return <button onClick={this.sendEvent}>Send</button>
    }
}

最后我们也可以不依赖浏览器提供的api，手动实现一个观察者模式，或者叫pub/sub，或者就叫EventBus。

function EventBus() {
  const subscriptions = {};
  this.subscribe = (eventType, callback) => {
    const id = Symbol('id');
    if (!subscriptions[eventType]) subscriptions[eventType] = {};
    subscriptions[eventType][id] = callback;
    return {
      unsubscribe: function unsubscribe() {
        delete subscriptions[eventType][id];
        if (Object.getOwnPropertySymbols(subscriptions[eventType]).length === 0) {
          delete subscriptions[eventType];
        }
      },
    };
  };

  this.publish = (eventType, arg) => {
    if (!subscriptions[eventType]) return;

    Object.getOwnPropertySymbols(subscriptions[eventType])
      .forEach(key => subscriptions[eventType][key](arg));
  };
}
export default EventBus;

10. Redux等

最后终于来到了大家喜闻乐见的Redux等状态管理库，当大家的项目比较大，前面讲的9种方法已经不能很好满足项目需求时，才考虑下使用redux这种状态管理库。这里就先不展开讲解redux了...否则我花这么大力气讲解前面9种方法的意义是什么？？？

总结

十种方法，每种方法都有对应的适合它的场景，大家在设计自己的组件前，一定要好好考虑清楚采用哪种方式来解决通信问题。

文初提到的那个小问题，最后我采用方案9，因为既然是小迭代项目，又是改别人的代码，当然最好避免对别人的代码进行太大幅度的改造。而pub/sub这种方式就挺小巧精致的，既不需要对别人的代码结构进行大改动，又可以满足产品需求。

更多编程相关知识，请访问：编程视频！！

以上是深入淺析React組件間通訊的10種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！