消息订阅与消息发布

一：前言

在项目开发过程中，经常遇到组件之间的值的传递。

• 第一种是父子组件的之间的传值

  • 父组件向传子组件传值 在父组件里的子组件标签上绑定需要传递的值

  render() {
  	const {todos} = this.state
  	return (
  		<div className="todo-container">
  			<div className="todo-wrap">
  				
  				<Header addToDo={this.addToDo}/>
  				<List todos={todos} delleToDo={this.delleToDo} updateTodo={this.updateTodo}/>
  				<Footer todos={todos} clearAllDone={this.clearAllDone} checkAllTodo={this.checkAllTodo}/>
  
  				<button onClick={this.handledHttp}>按钮</button>
  			</div>
  		</div>
  	)
  }
  

  • 子组件接收 通过props接收内容，例如：

  	let {todos,clearAllDone} = this.props
  

• 第二种兄弟组件间的传值 当然了，我们可以把子组件A的状态定义在父组件，然后再由父组件把状态值传递给子组件B，这样导致的后果是父组件代码会变得越来越大。PubSubjs就可以解决这样的问题了。

二：PubSub的使用

1）安装PubSub

yarn add pubsub-js

2) pubsub基本的使用

在组件Head中发布

import React,{ Component } from "react";

import PubSub from 'pubsub-js'

export default class Heard extends Component {
    handleTodoData = ()=>{
       let {addTodoElement} = this
        PubSub.publish('addTodoList',{name:addTodoElement.value})

    }
    render(){
        return (
            <div>
                <input ref={(elementNode)=>this.addTodoElement=elementNode} placeholder="请输入内容"/>
                <button onClick={this.handleTodoData}>添加数据</button>
            </div>
        )
    }
}

在组件Main中订阅

import React,{ Component } from "react";
import PubSub from 'pubsub-js'
export default class Main extends Component {
    componentDidMount(){
       PubSub.subscribe('addTodoList',(msg,data)=> {
           console.log('子组件订阅数据：',data)
       }) 
    }

    render(){
        return (
            <div>
                <ul>
                    <li>值1</li>
                </ul>
            </div>
        )
    }
}