003*：通信（父子通信，非父子通信）

目录

正文

1：父子传值-回调函数

2：父子传值-ref

3：中间人状态

4：订阅者模式

5：生产者消费者模式

/*
非父子通信方法3：官方提供
demo 案例：
一个电影列表，点击电影进入显示对应的详情页

案例分析：
1：axios 请求数据
2：map 映射循环渲染
3：一个 app 组件，一个 item 组件，一个 detail 组件。item 组件点击，detail 组件展示对应的详情。item 组件和 detail 组件通信
4：使用生产和消费者模式
*/

import React, { Component } from 'react'
import axios from 'axios'

// 1: 创建全局上下文对象
const GloablContext = React.createContext()

export default class FileItemDetailComponent extends Component {
    constructor(props) {
        super(props)

        this.state = {
            filemaList: [],
            detail: ""
        }
        axios.get('http://localhost:3000/cinema.json').then(res => {
            console.log(res.data)
            this.setState({
                filemaList: res.data.data.cinemas
            })
        })
    }
    render() {

        return (
            // 2:供应商包裹 div 组件，提供给消费者
            <GloablContext.Provider value={
                {
                    // 消费者通过 value 拿到数据
                    call: "打电话",
                    sms: "短信服务",
                    detail: this.state.detail,
                    // 5: 消费者消费数据，并修改数据，修改数据后，重新渲染组件，更新itemdetail 中的消费者数据
                    changeValue: (value) => {
                        this.setState({
                            detail: value
                        })
                    }
                }
            }>
                <div>
                    <ul>
                        {
                            this.state.filemaList.map(item => {
                                return (
                                    <FileItemComponent item={{ ...item }}></FileItemComponent>
                                )
                            })
                        }
                    </ul>
                    <FileDetailComponent></FileDetailComponent>
                </div>
            </GloablContext.Provider>
        )
    }
}


class FileItemComponent extends Component {
    render() {
        // 父传子,通过结构函数, 写一个回到函数（可以传递参数），里面 return 组件。
        var { name, address, cinemaId } = this.props.item
        return (
            // 3:消费者包裹组件，消费数据
            <GloablContext.Consumer>
                {
                    (value) => {
                        console.log(cinemaId)
                        return (
                            <div>
                                <li key={cinemaId} style={{ height: "80px" }} onClick={() => {
                                    console.log(address)
                                    // 4: 消费者消费数据，并修改数据
                                    value.changeValue(address)
                                }}>
                                    <span>{name}</span>
                                </li>
                            </div>
                        )
                    }
                }
            </GloablContext.Consumer>

        )
    }
}

class FileDetailComponent extends Component {
    render() {
        // 父传子,通过结构函数
        return (
            <GloablContext.Consumer>
                {
                    (value) => {
                        console.log(value)
                        return (
                            <div>
                                {/* 6：消费者显示更新之后的数据 */}
                                <h5>{value.detail}</h5>
                            </div>
                        )
                    }
                }
            </GloablContext.Consumer>
        )
    }
}

引用