React 组件之间的通信方式

Miracle_lihb 发布于2019-08-22 10:43 / 1044人阅读

摘要：父子组件通信子父组件通信同级组件之间的通信父子组件通信通信的手段这是最常见的通信方式，父组件只需要将子组件需要的传给子组件，子组件直接通过来使用。

在项目开发的过程中，随着应用功能复杂度的增加和组件层次划分的需求，组件之间的通信越来越多，
我大致认为组件之间的通信分为3种：父-子组件通信、子-父组件通信和同级组件之间的通信。

1.父-子组件通信

2.子-父组件通信

3.同级组件之间的通信

1.父-子组件通信 1.1通信的手段

这是最常见的通信方式，父组件只需要将子组件需要的props传给子组件，子组件直接通过this.props来使用。

1.2 通信内容

更多要提的是如何合理的设置子组件的props，要想将子组件设计成一个复用性强的通用组件，需要将能够复用的部分抽象出来，
抽象出来的props有两种形成，一种是简单的变量，另一种是抽象出来处理某种逻辑的函数。

以Header 组件为例

抽象出来三个props，分别是中间的title，渲染组件左边的renderLeftComponent，渲染组件右边的renderRightComponent
Header的部分实现

renderLeftComponent () {
    let leftDOM = {};
 
    if(this.props.renderLeftComponent) {
        return this.props.renderLeftComponent();
    }
    if (this.props.showBack) {
        let backFunc = this.props.onBack || this.goBack;
        leftDOM = ();
    }
    return leftDOM;
}
renderRightComponent () {
    if(this.props.renderRightComponent) {
    return this.props.renderRightComponent();
}
}
render () {
    return (
        
            
            {this.renderLeftComponent()}
            {this.props.title || "维C果蔬"}
            {this.renderRightComponent()}
            
        
    );
}

1.3 通信的动机

1.1中Header组件 props的通信动机是子组件需要这样的属性来完成自己的展示。还有一种动机可以统称向子组件传递监听事件,
前一种是子组件的需求，后一种更多的是父组件的需求，例如Listview的onEndReached这种属性，触发源是在子组件中，当子组件
的事件被触发或者达到某种状态的时候，调用父组件从属性中传过来的方法。

2.子-父组件通信 2.1 通信的手段

父-子组件通信的手段是通过子组件的props是子组件用父组件的东西，子-父组件通信，是父组件用子组件的东西，应该将传递的内容直接写在子组件上，然后给子组件设置ref，父组件直接通过ref操作子组件的属性。

2.2 通信的内容

子组件的属性

2.3 通信的动机

父组件想要调用子组件的属性

3.同级组件之间的通信

同级组件之间的通信，是构建复杂界面的粘合剂，哎呦喂，我好会比喻啊
以维C果蔬的首页为例：

通信1： Listview需要offsetHeight属性，Listview

Height的计算公式：window.innerHeight-Banner的Height-Menu的Height，

而Banner和Menu的Height都是需要在其Mount的时候才能计算。

通信2： ListView需要Menu的MenuId，才能够根据MenuId获取sku数据。

3.1通信的方式

同级组件之间的通信还是需要通过父组件作为中介，利用多次父-子组件通信，项目中将需要传递的数据放在了父组件的state中，变动时可以自动的同步传递。
将 bannerHeight，menuHeight，MenuId放在state中。
父组件代码示意：

this.state {
    bannerHeight: 0,
    menuHeight: 0,
    MenuId: 0
}
setBannerHeight(height) {
    this.setState({bannerHeight:height});
}
setMenuHeight(height) {
    this.setState({menuHeight:height});
}
onMenuClick(menuId) {
    this.setState({menuId:menuId});
}

3.2通信的动机

当组件需要的props，不能直接从父组件中获取时，需要父组件作为中介，再与其他的组件进行通信获取。

服务器托管私有云组件之间通信两台服务器之间的通信 App之间通信组件和组件通信

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91132.html

React 组件之间的通讯

摘要：父组件声明自己支持父组件提供一个函数，用来返回相应的对象子组件声明自己需要使用我胡汉三又回来了点击我如果是父组件向子组件单向通信，可以使用变量，如果子组件想向父组件通信，同样可以由父组件提供一个回调函数，供子组件调用，回传参数。在使用 React 的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信跨级组件之间...

dongxiawu 2019-08-23 16:59 评论0 收藏0
玩转 React（七）- 组件之间的数据共享

摘要：函数属性或者说事件在组件之间通信过程中是必不可少的，但是切莫让它影响了大家对单向数据流这一概念的理解。这应该属于一种的使用方式，而且这样做有悖单向数据流原则。上一篇文章玩转 React（六）- 处理事件介绍了在 React 中如何处理用户事件，以及 React 事件机制与原生 DOM 事件的差异和注意的问题，同时也介绍了事件处理函数中 this 的指向问题以及处理的几种方式及其优...

Gu_Yan 2019-08-21 18:00 评论0 收藏0
React中组件通信的几种方式

摘要：首次发表在个人博客需要组件之进行通信的几种情况父组件向子组件通信子组件向父组件通信跨级组件通信没有嵌套关系组件之间的通信父组件向子组件通信数据流动是单向的父组件向子组件通信也是最常见的父组件通过向子组件传递需要的信息子组件向父组件通信利用 showImg(https://segmentfault.com/img/remote/1460000012361466?w=1240&h=667)...

yeooo 2019-08-21 18:00 评论0 收藏0
解密传统组件间通信与React组件间通信

摘要：同时吸取了社区大量优秀思想，进行归纳比对。有兴趣的读者可以点击下面的链接购买，再次感谢各位的支持与鼓励恳请各位批评指正京东当当原文网址在React中最小的逻辑单元是组件，组件之间如果有耦合关系就会进行通信，本文将会介绍React中的组件通信的不同方式通过归纳范，可以将任意组件间的通信归类为四种类型的组件间通信，分别是父子组件，爷孙组件，兄弟组件和任意组件，需要注意的是前三个也可以算...

CoderBear 2019-08-23 12:01 评论0 收藏0
掌握react，这一篇就够了

摘要：小明小明儿子，可以看到组件显示了父组件的。小明受控组件和非受控组件受控组件和非受控组件这些都是指的表单组件，当一个表单的值是通过改变的而不是通过是受控组件，否则就是非受控组件。 react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。 jsx语法前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx...

Enlightenment 2019-08-23 11:45 评论0 收藏0