作者：zach5078

转发链接：

前言

这两天被临时抽调到别的项目组去做一个小项目的迭代。这个项目前端是用React，只是个小型项目所以并没有使用Redux等状态管理的库。刚好遇到了一个小问题：两个不太相关的组件到底该怎么进行通信。我觉得这个问题还挺有趣的，所以把我的思考过程写下来，大家也可以一起讨论讨论。

虽然重点是要讲两个不相关的组件间的通信，但我还是从最常见的父子组件通信讲起，大家就当温故而知新了。先把完整的总结列出来，然后再详细展开。

组件间通信方式总结

• 父组件 => 子组件：PropsInstance Methods
• 子组件 => 父组件：Callback FunctionsEvent Bubbling
• 兄弟组件之间：Parent Component
• 不太相关的组件之间：ContextPortalsGlobal VariablesObserver PatternRedux等

1. Props

这是最常见的react组件之间传递信息的方法了吧，父组件通过props把数据传给子组件，子组件通过去使用相应的数据

const Child = ({ name }) => {    {name}}class Parent extends  {    constructor(props) {        super(props)         = {            name: 'zach'        }    }    render() {        return (                    )    }}

2. Instance Methods

第二种父组件向子组件传递信息的方式有些同学可能会比较陌生，但这种方式非常有用，请务必掌握。原理就是：父组件可以通过使用refs来直接调用子组件实例的方法，看下面的例子：

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

大致的过程：

1. 首先子组件有一个方法myFunc
2. 父组件给子组件传递一个ref属性，并且采用callback-refs的形式。这个callback函数接收react组件实例/原生dom元素作为它的参数。当父组件挂载时，react会去执行这个ref回调函数，并将子组件实例作为参数传给回调函数，然后我们把子组件实例赋值给this.foo。
3. 最后我们在父组件当中就可以使用this.foo来调用子组件的方法咯

了解了这个方法的原理后，我们要考虑的问题就是为啥我们要用这种方法，它的使用场景是什么？最常见的一种使用场景：比如子组件是一个modal弹窗组件，子组件里有显示/隐藏这个modal弹窗的各种方法，我们就可以通过使用这个方法，直接在父组件上调用子组件实例的这些方法来操控子组件的显示/隐藏。这种方法比起你传递一个控制modal显示/隐藏的props给子组件要美观多了。

class Modal extends  {  show = () => {// do something to show the modal}  hide = () => {// do something to hide the modal}  render() {    return I'm a modal}}class Parent extends  {  componentDidMount() {    if(// some condition) {        ()    }  }  render() {    return (       {           = el        }}      />    )  }}

3. Callback Functions

讲完了父组件给子组件传递信息的两种方式，我们再来讲子组件给父组件传递信息的方法。回调函数这个方法也是react最常见的一种方式，子组件通过调用父组件传来的回调函数，从而将数据传给父组件。

const Child = ({ onClick }) => {     onClick('zach')}>Click Me}class Parent extends  {    handleClick = (data) => {        (\"Parent received value from child: \" + data)    }    render() {        return (                    )    }}

4. Event Bubbling

这种方法其实跟react本身没有关系，我们利用的是原生dom元素的事件冒泡机制。

class Parent extends  {  render() {    return (               );  }  handleClick = () => {    ('clicked')  }}function Child {  return (    Click  );    }

巧妙的利用下事件冒泡机制，我们就可以很方便的在父组件的元素上接收到来自子组件元素的点击事件

5. Parent Component

讲完了父子组件间的通信，再来看非父子组件之间的通信方法。一般来说，两个非父子组件想要通信，首先我们可以看看它们是否是兄弟组件，即它们是否在同一个父组件下。如果不是的话，考虑下用一个组件把它们包裹起来从而变成兄弟组件是否合适。这样一来，它们就可以通过父组件作为中间层来实现数据互通了。

class Parent extends  {  constructor(props) {    super(props)     = {count: 0}  }  setCount = () => {    ({count: .count + 1})  }  render() {    return (              

				  
文章来源：《信息通信技术与政策》 网址:  http://www.xxtxzz.cn/zonghexinwen/2020/0817/599.html