React学习笔记—非父子通信

一、React中的状态提升(中间人模式)(非父子通信)

1、React中的状态提升(不推荐)

概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件上.在父组件上改变这个状态然后通过props 分发给子组件


二、React中的发布订阅模式(非父子通信)

1、发布订阅者模式图解:

2、发布订阅者模式例子:

import React, { Component } from 'react'

// 将来在redux中会用到
const observer = {
    list: [],
    // 订阅
    subscribe(callback) {
        console.log(callback);

        this.list.push(callback)
    },
    // 发布,分发
    dispatch(data) {
        // 遍历每个数组,让每个元素(函数) 执行
        this.list.forEach(item => {

            // console.log(item);
            item(data) // 执行回调函数
        })

    }
}

class Child1 extends Component {
    // 创建成功 ,DOM挂载完成
    componentDidMount() {
        console.log("componentDidMount", "调用订阅方法");
        // 在child1组件中使用subscribe订阅
        observer.subscribe((data) => {
            console.log("child1定义的callback", data);
        })
    }
    render() {
        return (
            <div style={{ background: "red" }}>child1-我是微信用户</div>
        )
    }
}


class Child2 extends Component {
    render() {
        return (
            <div style={{ background: "yellow" }}>
                child2-我是公众号发布者
                <button onClick={this.handleClick}>发布</button>
            </div>
        )
    }
    // 在child2组件中使用dispath发布
    handleClick = () => {
        observer.dispatch("来自child2的问候")
    }
}


export default class App extends Component {
    render() {
        return (
            <div>
                <Child1></Child1>
                <Child2></Child2>
            </div>
        )
    }
}

三、React中的context状态树传参(非父子通信)

1、context状态树传参(消费者生产者模式):

2、context状态树传参例子:

import React, { Component } from 'react'
const GlobalContext = React.createContext() // 创建一个context对象

class Child1 extends Component {
    render() {
        return (
            // 消费者
            <GlobalContext.Consumer>
                {
                    // context 是为消费者提供的服务,必须是一个回调函数
                    context => (
                        <div>child1---{context.text}</div>
                    )
                }
            </GlobalContext.Consumer>
        )
    }
}

class Child2 extends Component {
    render() {
        return (
            // 消费者
            <GlobalContext.Consumer>
                {
                    context => (
                        <div>
                            child2---{context.call}
                            <button onClick={() => this.handleClick(context)}>child2通信按钮</button>
                        </div>
                    )
                }
            </GlobalContext.Consumer>
        )
    }
    handleClick = (context) => {
        context.changeState("来自child2的问候")

    }
}

class Child3 extends Component {
    render() {
        return (
            <div>child3</div>
        )
    }
}


export default class App extends Component {
    state = {
        text: "私服"
    }
    changeState = (data) => {
        this.setState({
            text: data
        })
    }
    render() {
        return (
            // 供应商
            <GlobalContext.Provider value={{
                    sms: "短信服务",
                    call: "打电话服务",
                    text: this.state.text,
                    changeState: this.changeState
                }}>
                <div>
                    <Child1></Child1>
                    <Child2></Child2>
                    <Child3></Child3>
                </div>
            </GlobalContext.Provider>
        )
    }
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:React学习笔记—非父子通信

文章字数:684

本文作者:Spicy boy

发布时间:2020-04-22, 00:05:32

最后更新:2020-08-26, 13:05:57

原始链接:http://www.spicyboy.cn/2020/04/22/React%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%E2%80%94%E9%9D%9E%E7%88%B6%E5%AD%90%E9%80%9A%E4%BF%A1/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏