React组件间通信方式有哪些

这篇文章主要介绍React组件间通信方式有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了香河免费建站欢迎大家使用！

组件间通信方式总结

父组件 => 子组件：

Props
Instance Methods

子组件 => 父组件：

Callback Functions
Event Bubbling

兄弟组件之间：

Parent Component

不太相关的组件之间：

Context
Portals
Global Variables
Observer Pattern
Redux等

1. Props

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

const Child = ({ name }) => {
    {name}
}

class Parent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: 'zach'
        }
    }
    render() {
        return (
            
        )
    }
}

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 (
       {
          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 I'm a modal
  }
}

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

3. Callback Functions

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

const Child = ({ onClick }) => {
     onClick('zach')}>Click Me

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

4. Event Bubbling

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

class Parent extends React.Component {
  render() {
    return (

); } handleClick = () => { console.log('clicked') } } function Child { return ( ); }

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

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 (
      
        
        
      
    );
  }

}

6. Context

通常一个前端应用会有一些"全局"性质的数据，比如当前登陆的用户信息、ui主题、用户选择的语言等等。这些全局数据，很多组件可能都会用到，当组件层级很深时，用我们之前的方法，就得通过props一层一层传递下去，这显然太麻烦了，看下面的示例：

class App extends React.Component {
  render() {
    return ;
  }
}

function Toolbar(props) {
  return (
    
      
    
  );
}

class ThemedButton extends React.Component {
  render() {
    return ;
  }
}

上面的例子，为了让我们的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 (
      
        
      
    );
  }
}

function Toolbar() {
  return (
    
      
    
  );
}

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  render() {
    return ;
  }
}

简单的解析一下：

React.createContext创建了一个Context对象，假如某个组件订阅了这个对象，当react去渲染这个组件时，会从离这个组件最近的一个Provider组件中读取当前的context值
Context.Provider: 每一个Context对象都有一个Provider属性，这个属性是一个react组件。在Provider组件以内的所有组件都可以通过它订阅context值的变动。具体来说，Provider组件有一个叫value的prop传递给所有内部组件，每当value的值发生变化时，Provider内部的组件都会根据新value值重新渲染
那内部的组件该怎么使用这个context对象里的东西呢？
a. 假如内部组件是用class声明的有状态组件：我们可以把Context对象赋值给这个类的属性contextType，如上面所示的ThemedButton组件
```
    class ThemedButton extends React.Component {
      static contextType = ThemeContext;
      render() {
        const value = this.context
        return ;
      }
    }
```
b. 假如内部组件是用function创建的无状态组件：我们可以使用Context.Consumer，这也是Context对象直接提供给我们的组件，这个组件接受一个函数作为自己的child，这个函数的入参就是context的value，并返回一个react组件。可以将上面的ThemedButton改写下：
```
    function ThemedButton {        return (            
                {value => }            
        )
    }
```

最后提一句，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元素超出了红色框的范围就被截断了。

React组件间通信方式有哪些

怎么用portals解决呢？

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

重庆分公司，新征程启航

React组件间通信方式有哪些

组件间通信方式总结

1. Props

2. Instance Methods

3. Callback Functions

4. Event Bubbling

5. Parent Component

6. Context

7. Portals

8. Global Variables

9. Observer Pattern

10. Redux等

其他资讯