react-订阅者和发布者模式的简单使用举例

1.创建一个bus.js 用来放订阅者和发布者的方法

export let bus = {
  list: [], // 为了存储订阅者的回调函数
  // 订阅者
  subscribe(callback) {
    this.list.push(callback)
  },
  // 发布者
  publish(params) {
    this.list.forEach(callback => {
      callback && callback(params)
    })
  }
}

2. 在一个B组件里面先进行订阅

点击查看详细代码

import React, { Component } from 'react'
import { bus } from '../bus'

export default class filmDetail extends Component {
  constructor() {
    super()
    this.state = {
      content: ''
    }
    bus.subscribe(text => {
      // text 是发布者传的参数，可以在当前组件使用
      this.setState({
        content:text
      })
    })
  }
  render() {
    return <div style={{marginTop:'20px'}}>{this.state.content}</div>
  }
}

3. 在一个A组件里面再进行发布

点击查看详细代码

import React from 'react'
import FilmItem from '../components/filmItem.js'
import FilmDetail from '../components/filmDetail'
import { bus } from '../bus'
class APP extends React.Component {
  //  脑子听懂了，但是手不会
  changeLikeOne(params) {
    console.log('选中的一项', params)
  }
  dataList = [
    {
      filmName: '假如爱有天意',
      fileId: 12,
      grate: 9.6,
      filmDetail: `2003年的大学生梓希（孙艺珍饰）一天收拾房间，无意中发现一个神秘的箱子，里面满载着母亲珠喜（孙艺珍饰）留下的情书，在阅读中她重温着母亲的初恋回忆。1968年的珠喜，是一个清纯可爱的少女，与穷学生俊河（曹承佑饰）一见钟情，由于珠喜显赫的家世，令两人的恋爱陷入俗套的门不当户不对的痛苦纠结中。2003年的梓希爱情同样坎坷，她暗恋着戏剧学会的尚民（赵寅成饰），却一直难以表白自己的爱意。
    而巧妙的是，梓希发觉母亲的初恋故事跟她自己遭遇十分相似。自己能得到幸福吗？还是如母亲一般曲折难求？`
    },
    {
      filmName: '山河恋人',
      fileId: 16,
      grate: 3.9,
      filmDetail: `山河依旧，波涛汹涌，故人难回首。这世间大江大河的涌动总比人的别离多了几份稳定与萧索。山是那个山，河水流淌是那个河，只是在山河间生存的人们的变化却没了寻常的规。`
    }
  ]
  render() {
    return (
      <div>
        <FilmItem></FilmItem>
        {this.dataList.map(item => (
          <FilmItem
            key={item.fileId}
            {...item}
            onEvent={value => {
              bus.publish(value)
            }}
          ></FilmItem>
        ))}
        <FilmDetail></FilmDetail>
      </div>
    )
  }
}
export default APP