react组件之间有哪些通信方法？组件之间的8种通讯方式！

2021-06-18 15:28:08 浏览数 (3)

在React学习中我们会遇到不同的问题，而且在网上也是拥有很多。那么今天我们就来说说“react组件之间有哪些通信方法？”这个问题吧！下面是小编分享的一些相关信息和内容，大家可以作为参考和了解！

组件通信图

这是一张有关于组件之间相互通信的图片大家可以了解一下。那么对于这个组件通信有下面这几点：

1.Props

Props方法这是目前为止最常用的方式，他被用于在组件之间传递信息，而且我们在使用 props方法的时候还可以把数据从父组件传递到它的子组件中；而且 Props 是 React 的核心功能，也是 React 的基础知识。更多相关的知识和内容我们可以前往W3cschool这个网站学习和了解。

2.实例方法

我们通过在父组件中拥有 refs 从而来引用子组件，之后就可以实现调用子组件的实例方法了。也就是我们说的另一种从父组件访问子组件的方式；代码如下： 

class Thechild extends React.component {
myFunc(){
return “he11o";}
}}
class TheParent extends React.Component {
render(){
return(
<Thechi1d
ref-{foo-> {
this.foo =foo;
}}/>);}
componentDidMount( f
var x= this.foo.myFunc();
}}
3.回调函数

我们通过方法一和方法二知道怎么把数据从我们的父组件传给我们的子组件，然而在我们的父组件中可以把一个属性传给子组件如下代码：

<MyChild myFunc={this.handlechildFunc}/>

然后我们在通过子组件调用这个函数，代码如下：

this.props.myFunc();

最后我们还需要在子组件中声明这个函数，代码如下：

MyChiid.propTypes ={
myFunc: React.PropTypes.func};

这样我们就完成了回调函数的使用了。

4.事件冒泡

事件冒泡这个方法并不是 React 的概念，而是浏览器中 DOM 的事件机制，冒泡事件的方法和回调函数类似；它也可以把数据从子组件发送到父组件。而且当我们想在父组件中捕获来自子组件中的 DOM 事件时，就可以采用这个方法了。代码如下：

class Childcomponent extends React.component {
render( ){
return(
<div>This is child component</div>);
}}
class Parentcomponent extends React.component {
handleclick(evt) {
console.log(evt.target);}
render(){
return(
<div onclick = {this.handleclick } >
<childcomponent/>
</div>
);}}

在这串代码中，我们可以通过点击子组件中的 div 元素之后，我们可以在浏览器的控制台可以看到输出了这个 div 元素，这是因为我们在父组件中定义的事件监听器成功监听到了来自子组件冒泡上来的 click 事件。

5.父组件

当我们在使用的过程中如果需要让两个组件之间相互通讯的话，那么它们肯定会拥有共同的父级组件，而且我们可以使用上述的策略组合，而且我们只是需要使用父级组件作为沟通的媒介，把数据作为父组件的 state 和方法来定义就可以了。代码如下： 

class Parentcomponent extends React.component{ 
render(){
return(
<div>
< SiblingA
 myProp = {this.state.propA}
myFunc = {this.siblingAFunc}/>
< SiblingB
myProp = { this.state.propB}
myFunc = {this.siblingBFunc}/>
</div>);
}}
6.观察者模式

观察者模式这个方法是一种软件设计模式，而且是拥有一个对象可以在需要时发送数据到多个其他对象的功能；不仅如此这种方式适用于所有组件，不需要时父子组件或者平级组件；在我们平常中的做法是将在​ componentDidMount()​中的订阅事件，通过在 ​componentWillUnmount() ​里取消订阅，然后当我们在接收事件时调用 setState() 方法就可以实现了。而且现在网络 上也有很多库可以实现观察者模式，比如：PubSubJS，EventEmitter等等这些方法。

7.全局变量

对于这个方法我们一般来说是不怎么使用这个方法的，因为当我们在使用全局变量这个方法时需要注意的细节会比较多所以建议不熟练的小伙伴不要使用比较好，但是它还很实用，还可以帮我们节省大量时间；小编在这里建议大家在使用全局变量这个方法的时候要用 ​window.​ 语法来明确定义，这样还可以方便我们以后的管理维护。

8.Context

Context 这个方法和我们得第一种方法 props 类似，但是这个方法它不是和props方法一样是单个子组件传递数据，它是可以为整个子树提供数据的；而且Context 只可以在树中向下传递数据（父组件到子树）。而且还可以配合回调函数来向上传递数据（子树到父组件）。

总结：

关于“react组件之间有哪些通信方法？”这个问题，小编为大家整理了八个点希望对大家有所帮助，当然如果你有更好的方法或者点子也可以提出来和大家分享噢！更多有关于react学习方面的内容我们都可以在React 教程中进行学习。


React.JS

0 人点赞