react-组件各种通讯方式

1、props父子组件通讯

2、context多级嵌套组件通讯

3、event/emit 全局的组件之间的通讯

4、redux/mobx 全局的状态管理

Context:

创建Context会返回两个参数 (Provider,Consumer)

第一个参数是生产者 用来存储变量

第二个为消费者 使用消费者来拿到生产者的值

为什么要使用 Context？ 

因为它可以在无限层级的嵌套组件中进行参数和方法的传递 而且中间层不需要数据处理

 订阅发布事件:

//观察者模式 订阅/发布
export const { Provider, Consumer } = React.createContext();
//React是一个对象 React.component是一个函数 所以他才有原型  我们利用Objcet.assign
// 来把他的原型和后面自定义方法合并到原有的原形
// 定义一个对象用来接收 事件名和后面的剩余参数 参数其实就是我们传递的方法
// 定义addEvent 这个会把原有的addEvent顶替掉 对象的属性名就是事件名 属性值就为后面传递的参数
// 定义触发方法 刚刚在对象中已经定义了一个自定义事件
// 所以现在只需要调用这个自定义事件 传入一个剩余参数
let eventList = {};
const addEventListener = (eventName, callback) => {
  eventList[eventName] = callback;
};
const emit = (eventName, ...args) => {
  eventList[eventName] && eventList[eventName](...args);
};