• React四种组件通信详解

    组件间通信常见的几种情况

    一、父组件到子组件

    二、子组件到父组件

    三、跨级组件

    四、非嵌套组件

    React四种组件通信详解

    1)父组件到子组件:通常父组件使用props向子组件传递,然后子组件处理
    父组件Parent.js

    React四种组件通信详解

    子组件Child.js

    React四种组件通信详解

    在上面的例子中,父组件Parent通过title属性向子组件Child传递值,子组件Child通过this.prop.title就可以获取到父组件Parent的传递的值
    2)子组件到父组件:利用回调函数
    父组件Parent.js

    React四种组件通信详解

    子组件Child.js

    React四种组件通信详解

    上面例子中,在子组件Child中绑定了onClick事件。调用成本cb()方法。在cb()方法中,通过props发送出去一个方法,父组件中去接收这个方法,callback={this.callback},然后在自身的callback函数中进行一些列操作。
    3)跨级组件:即父组件向子组件的子组件通信,向更深层子组件通信
    ①中间组件层层传递props
    ②使用context对象
    对于第一种方式,如果父组件结构较深,那么中间每一层组件都要去传递props,增加了复杂度,并且这些props并不是中间组件自己需要的。
    使用context方式中context相当于一个全局变量,是一个大容器,我们可以把要通信的内容放在这个容器中,这样不管嵌套多深。都可以随意取用。使用context要满足两个条件:上级组件要声明自己支持context,并提供一个函数来返回相应的context对象、子组件要声明自己需要使用context
    父组件Parent.js

    React四种组件通信详解

    子组件Child.js

    React四种组件通信详解
    子组件的子组件GrandChild.js

    React四种组件通信详解

    4)非嵌套组件:即没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。
    ①利用二者共同父组件的context对象通信
    ②使用自定义事件
    使用二者共同父级进行中转会增加子组件和父组件间的耦合度,如果组件层次比较深,找到二者共同父组件会相对麻烦。
    使用自定义事件方式需要使用events包:npm install -S events
    创建event.js文件,向外提供一个事件

    React四种组件通信详解

    父组件Parent.js

    React四种组件通信详解

    组件Aoo.js

    React四种组件通信详解

    组件Boo.js

    React四种组件通信详解

    实际应用中,在组件间进行通信时,这些通信方式都可以使用,区别只在于使用相应的通信方式的复杂程度和个人喜好,选择最合适的那一个。比如,通过事件订阅模式通信不止可以应用在非嵌套组件间,还可以用于跨级组件间,非嵌套组件间通信也可以使用context。

    «
    »
以专业成就每一位客户,让企业IT只为效果和安全买单

以专业成就每一位客户,让企业IT只为效果和安全买单