react中组件间通信的方式

在react中，我们和vue中一样可以借助props或者消息订阅与发布进行组件间通信

使用props进行组件间通信

1. 对于父子组件，如果是父组件给子组件传递数据，我们可以直接利用props进行传递
   如下所示

//父组件App.jsx中传递数据
<Student name="肖肖"/>

//子组件Student组件中的index.jsx接收数据
//index.jsx中
const {
    
    name}=this.props
console.log(name) //肖肖

2. 如果是子组件给父组件传递数据，我们也可以利用props，这里props的用法也是和vue中的一样，父组件给组件传递一个函数，子组件接收调用函数，把数据作为参数传给父组件

//父组件App.jsx接收数据
export default class App expends Component{
    
    
	getData=(data)=>{
    
    
		console.log(data) //肖肖
	}
	render(){
    
    
		return(
			<Student getData={
    
    this.getData}>
		)
	}
}

//子组件Student中发送数据
state={
    
    
	name:'肖肖'
}
this.props.getData(this.state.name)

3. 如果兄弟组件元素之间想要利用props进行通信，也是可以的，这个时候我们就需要找到两个兄弟元素之间共同的父元素，也就是App.jsx ,利用App.jsx作为中间人进行消息传递，比较繁琐，对此我们有更好的解决办法

使用PubSub消息订阅与发布进行组件间通信

PubSub的基本用法非常简单，在github中有详细的介绍，简单介绍一下就是安装（npm i pubsub-js），在使用这个pubsub这个库的组件中引入(import PubSub from ‘pubsub-js’)，使用publish发布消息和Subscript订阅消息(在componentDidMount中订阅)以及unSubscript取消订阅（在componentWillUnmount中）
举个例子，学生（发布消息）和学校（订阅消息）两个兄弟组件之间使用PubSub进行通信

//学校订阅消息
import PubSub from 'pubsub-js'
export default class School	extends Component {
    
    
	render(){
    
    
		return(
			//订阅消息
			componentDidMount(){
    
    
				this.token=PubSub.publish('xiaoxiao',(_,data)=>{
    
    //注意这里的第二个参数才是数据
					console.log(data) //你好
				})
			}
			//取消订阅
			componentWillUnmount(){
    
    
        		PubSub.unsubscribe(this.token)
    		}
		)
	}
}

//学生发布消息
import PubSub from 'pubsub-js'
export default class Scudent extends Component {
    
    
	render(){
    
    
		return(
			PubSub.Subscript('xiaoxiao','你好')
		)
	}
}