1. 组件通讯

1.1 props

主要用于父传子，只能一级一级传递

传递数据的方法：属性名={值}，属性名自定义

如果是函数组件接收数据，则通过形参props接收数据

props是对象{arr：[...]}，对象上的属性就是传递数据时，组件上的属性

如果是类组件接收数据，使用this.props

props可以传递任何类型的数据（普通的数据类型、虚拟dom、组件类型、组件实例）

props数据是只读的，不要修改

批量传递：<Text {...obj} />===>
写在组件子节点的内容，默认为props对象中children属性的值
<Text >测试</Text>
function Text(props){
	// 显示‘测试’两个字    
    return <div> {props.children}</div>
}

1.2 context

react提供的方案，自上而下传递，允许跨级传递（爷===>父；爷===>孙）

适用于父级组件传递数据给孙组件，父组件===》孙组件

步骤：App => Far => Son
传递数据：
创建context对象：const context = React.createContext( '默认值')，默认值在不写 Provider 的时候生效

解构出Provider： const {Provider} = context

用Provider包裹整个组件
要传递的数据通过给Provider添加属性value的值添加
<Provider value={data}>
	<div>
    	App
		<Far></Far>
    </div>
</Provider>
接收数据：方式一
//利用context接收数据：
const  {Consumer} = context// 结构出Consumer
export default class Son extends Component{
    render(){
        return (
        	<Consumer>
            	{(data)=>{
            return <div>Son,{data}</div>
        }}
            </Consumer>
        )
    }
}
接收数据：方式二
export default class Son extends Component{
 // 给接收数据的组件添加一个静态属性 contextType
    static contextType =context
	render(){
   		// 使用this.context，这就是传递过来的数据     
        return <div>Son:{this.context}</div>
    }
}

1.3 pubsub-js

pubsub-js是一个独立的js库，props和context是react技术

组件之间不需要有嵌套关系，props和context需要组件之间有嵌套关系

是一个发布订阅模式的js库，传递数据的组件就是发布者，接收数据的组件就是订阅者

一个组件既可以是发布者（传递数据），也可以是订阅者（接收数据）

一个发布者（传递数据）可以对应多个订阅者（接收数据）
操作步骤：
安装：npm i publish-js

导入对象，提高发布 / 订阅功能：import PubSub from 'pubsub-js'
提供的一些方法
接收数据：（订阅）PubSub.subscribe(话题，callback)，一般正在挂载的时候
// subId:方法的返回值，当前订阅的唯一标识符，用于清除当前订阅，一般在组件挂载时订阅
var subId = PubSub.subscribe('car' , function(meassage , data){
// meassage:话题；data接收的数据
    console.log(data)
})
传递数据：（发布）PubSub.Publish("话题"，data)
PubSub.publish('car','Hello Word!')
// car:是话题
// Hello Word!:是需要传递的数据内容
取消指定的订阅（获取数据）,一般在组件卸载的时候,清除之前的订阅数据，节约内存
PubSub.unsubscribe(subId)
// 利用订阅的唯一标识符
取消某个话题的所有订阅
PubSub.unsubscribe(话题)
取消所有订阅
PubSub.clearAllSubscriptions()
为什么要取消订阅?
// 因为pubsub-js内部,管理了一个对象.每一次订阅的就是往对象中添加属性,值是数组,数组中存放了当前话题所对应的所有订阅的回调函数
   {
      car: [callback1, callback2]
   }
 //如果组件卸载了,但是组件的订阅还在,这就浪费了内存. 所以组件卸载的时候要清除订阅.