Skip to main content

组件通信的方式

父子组件通信方式

传递数据(父传子)与传递方法(子传父)
ref 标记 (父组件拿到子组件的引用，从而调用子组件的方法)
在父组件中清除子组件的 input 输入框的 value 值。this.refs.form.reset()

非父子组件通信方式

状态提升(中间人模式)
React 中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过 props 分发给子组件.
发布订阅模式实现
context 状态树传参

// a. 先定义全局context对象
import React from 'react'

const GlobalContext = React.createContext()

export default GlobalContext

// b. 根组件引入GlobalContext，并使用GlobalContext.Provider（生产者）
//重新包装根组件 class App {}
<GlobalContext.Provider
    value={{
        name:"kerwin",
        age:100,
        content:this.state.content,
        show:this.show.bind(this),
        hide:this.hide.bind(this)
    }}
>
<之前的根组件></之前的根组件>
</GlobalContext.Provider>

// c. 任意组件引入GlobalContext并调用context，使用GlobalContext.Consumer（消费者）
<GlobalContext.Consumer>
{
    context => {
        this.myshow = context.show; //可以在当前组件任意函数触发
        this.myhide = context.hide;//可以在当前组件任意函数触发
        return (
            <div>
                {context.name}-{context.age}-{context.content}
            </div>
        )
    }
}
</GlobalContext.Consumer>

注意：GlobalContext.Consumer 内必须是回调函数，通过 context 方法改变根组件状态

context 优缺点：
优点：跨组件访问数据
缺点：react 组件树种某个上级组件 shouldComponetUpdate 返回 false,当 context 更新时，不会引起下级组件更新

父子组件通信方式
非父子组件通信方式