React -非父子通信

非父子组件通信 - - 订阅发布者模式

• 组件外部定义对象
  • 对象内部定义一个空数组
  • 定义两个函数，subscribe()向数组添加函数，dispatch()循环数组执行函数
• 定义两个非父子组件
  • 订阅者调用subscribe()传入回调函数
  • 发布者调用dispatch()传入发布内容

  const objPublic = {                      - - 组件外部定义对象
	  list:[],
	  subscribe(callback){                   - -  订阅
	    this.list.push(callback)
	  },
	  dispatch(data){                        - - 发布
	    this.list.forEach(item =>{           - - 遍历数组， 让每个元素（函数） 执行回调函数
	      item(data)
	    })
	  }
  }

Child1组件：class Child1 extends Component {

              componentDidMount() {
                objPublic.subscribe((data) =>{  - - 调用订阅函数，并传入回调函数
                  console.log(data);
                })
              }

              render() {
                return  <div>我是用户</div>
              }
            }

Child2组件：class Child2 extends Component {
	          render() {
	            return (
	              <div>
	                <span>我是发布者</span>
	                <button onClick={this.handleClick}>发布</button>
	              </div>
	            )
	          }
	          handleClick() {                      - - 点击事件调用发布函数，并传入参数
	            objPublic.dispatch("来自child2的问候")
	          }
          }

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

非父子组件通信 - - context

• 创建对象 const GlobalContext = React.createContext()
• 父组件渲染内容用 <GlobalContext.Provider >包裹
  • 固定 value 属性传递对象 <GlobalContext.Provider value={{ call: 123}} >
• 子组件渲染内容用 <GlobalContext.Consumer >包裹
  • 在回调中使用传递的数据，回调参数就是value里的对象

 const GlobalContext = React.createContext() // 创建一个context对象
  
 Child1组件： class Child1 extends Component {
			    render() {
			      return <GlobalContext.Consumer>
		               {
		                  context => (
		                  <div>child1 - - {context.phone}</div>
		                  )
		                }
		             </GlobalContext.Consumer>
			    }
			  }
  
 Child2组件： class Child2 extends Component {
				 render() {
				    return <GlobalContext.Consumer>
		              {
		                context => (
		                <div>child2 - - {context.call}
		                  <button onClick={() => this.handleClick(context)}>c2通信</button>
		                </div>
		                )
		              }
		          </GlobalContext.Consumer>
				  }
				  handleClick = (context) => {
				    context.changeState("C2-7654321")
				  }
				}
 父组件： export default class App extends Component {
		    state = {
		      phone:"1234567"               //定义phone
		    }
		    changeState = (data) => {       //定义改变phone的方法
		      this.setState({
		        phone:data
		      })
		    }
		    render() {
		      return <GlobalContext.Provider value={{
		              call:"电话服务",
		              phone:this.state.phone,
		              changeState:this.changeState
		             }}>
		              <div>
		                <Child1/>
		                <Child2/>
		              </div>
		            </GlobalContext.Provider>
		    }
		  }