React非父子组件通信的三种方式和插槽

1.状态提升（中间人模式）

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

2.发布订阅模式实现

var bus = {
  // 订阅
  list: [],
  subscribe(callback) {
    console.log(callback);
    this.list.push(callback)
  },

  // 发布
  publish(text) {
    console.log(this.list);
    this.list.forEach(callback => {
      callback && callback(text)
    })
  }
}
// 订阅者
bus.subscribe((value) => {
  console.log("11111", value);
})
bus.subscribe((value) => {
  console.log("22222", value);
})
bus.publish("厉害了")

3.context状态树传参

import React, { Component } from 'react'
// 创建context对象
const GlobalContext = React.createContext()
export default class setState extends Component {
  render() {
    return (
      <GlobalContext.Provider value={{
        tell: "123456"
      }}>
        <div>
          <State></State>
        </div>
      </GlobalContext.Provider>
    )
  }
}


class State extends Component {
  render() {
    return (<GlobalContext.Consumer>
      {
        (value) => {

          return (
            <div>
              {value.tell}
            </div>
          )
        }
      }
    </GlobalContext.Consumer>)

  }
}

4.插槽

import React, { Component } from 'react'

export default class setState extends Component {
  render() {
    return (
      <div>
        <State>
          <div>1111</div>
          <div>2222</div>
          <div>3333</div>
        </State>
      </div>
    )
  }
}

class State extends Component {
  render() {
    // props中的children属性
    // console.log(this.props.children);
    return (
      <div>
        {/* 会将三个div都显示出来 */}
        {this.props.children}
        {/* 可以根据数组的特性选择，也能调整显示不同顺序 */}
        {this.props.children[1]}
      </div>
    )
  }
}