React学习笔记23-非父子通信(订阅发布模式)

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-08

23.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

1.订阅发布模式进行兄弟组件通信的案例

 1.构建一个调度中心

var bus = {
    list: [],
    //订阅
    subscribe(callback) {
        this.list.push(callback)
        console.log(this.list)
    },
    //发布
    publish(name, text) {
        //遍历所有list，将回调函数执行
        this.list.forEach((item, index) => {
            if (item && item.name === name)
                item.fun(text)
        })
    }
}

2.书写业务代码

import React, { Component } from 'react'
import axios from 'axios'
var bus = {
    list: [],
    //订阅
    subscribe(callback) {
        this.list.push(callback)
        console.log(this.list)
    },
    //发布
    publish(name, text) {
        //遍历所有list，将回调函数执行
        this.list.forEach((item, index) => {
            if (item && item.name === name)
                item.fun(text)
        })
    }
}
export default class App extends Component {
    constructor() {
        super()
        this.state = {
            filmList: [],
        }
        axios.get('http://localhost:3000/filmlist.json').then(res => {
            console.log(res.data.data.films)
            this.setState({
                filmList: res.data.data.films
            })
        })
    }
    render() {
        return (
            <div>
                {this.state.filmList.map(item => {
                    return (
                        <FilmItem {...item} key={item.filmId}></FilmItem>
                    )
                })}
                <FilmDetail></FilmDetail>
            </div>
        )
    }
}
/* 受控组件 */
class FilmItem extends Component {
    //发布者
    render() {
        return (
            <div style={{ overflow: 'hidden', padding: '10px' }} onClick={
                () => {
                    //发布
                    bus.publish("getDetail", this.props.synopsis)
                }
            }>
                <img style={{ width: '100px', float: "left" }} src={this.props.poster} alt="" />
                <h4>{this.props.name}</h4>
                <h5>观众评分:{this.props.grade}</h5>
            </div>
        )
    }
}

class FilmDetail extends Component {
    constructor() {
        super()
        this.state = {
            detail: ""
        }
        //订阅
        bus.subscribe({
            name: "getDetail", fun: (value) => {
                this.setState({
                    detail: value
                })
            }
        })
    }
    render() {
        return (
            <div style={{ position: 'fixed', right: '0', top: '100px', background: 'yellow', width: "200px", padding: "10px" }}
            >{this.state.detail}</div>
        )
    }
}

可以看到FilmItem组件是发布者，负责发布电影的详情信息。在发布时传入了一个方法名和详情信息。

FilmDetail组件是订阅者，向调度中心传入了一个对象包含了方法名和方法体。

订阅发布模式比起中间人模式的好处

1.可以进行局部刷新。而不需要每次都通过父组件的setState来将所有的子组件都刷新。

2.降低父子组件之前的耦合度，有利于代码维护