react组件通信\ React 组件通信 \ 父子组件间基于行内属性传参（可以是普通的状态或者函数），props接收

React 组件通信

父子组件间

基于行内属性传参（可以是普通的状态或者函数），props接收，父传子

EventBus发布订阅实现

执行上下文传参，用于祖宗组件和后代组件之间的传参

redux...公共状态管理

浏览器数据缓存

......

父子组件间

基于行内属性传参（可以是普通的状态或者函数），this.props接收，父传子

父

子

执行上下文传参，用于祖宗组件和后代组件之间的传参

祖宗组件把需要传递的状态放在执行上下文中

static childContextTypes={

// 规定执行上下文中传递数据的规则

}

生命周期 getChildContext

getChildContext 第一次调用是在状态初始化之后，如果修改state状态，会重新调用该生命周期，把执行上下文中的数据更新

通过返回值，把数据放在执行上下文中，供后代组件调用

getChildContext(){

return {}

// 返回值是放在上下文中的数据

}

后代组件就可以在执行上下文中拿到传递的状态

static contextTypes={}

这是后代组件，规定从执行上下文中拿到的值类型，然后通过this.context 获取数据

后代组件的规则要和祖宗组件定义的规则保持一致

后代组件接收上下文数据时，必须要规定类型，给哪个属性规定类型，就接收哪个，不规定就不接受

父

子

*执行上下文新语法

创建 context.js

import React from "react";

React.createContext(); 创建一个执行上下文对象

let ThemeContext = React.createContext();

export default ThemeContext;

父组件

import ThemeContext from "./context";

子第一种

把执行上下文对象赋值给contextType属性

然后就可以通过this.context调用

子第二种

ThemeContext.Consumer 内置组件，是提供给后代组件消费

（使用）执行上下文中的数据

组件写个箭头函数，箭头函数的形参就是存储的执行上下文中的数据

箭头函数的返回值，来写jsx元素

发布订阅EventBus

EventBus.js

class EventBus {
  //事件池
  pond = {};
  //往事件池中添加事件
  $on(name, func) {
    // 如果事件池中没有这个事件类型，就增加一个事件类型为空数组
    // name func 形参 传递进来的事件类型和函数名
    if (!this.pond.hasOwnProperty(name)) {
      this.pond[name] = [];
    }
    // 数组中有这个函数，直接return
    if (this.pond[name].some((item) => item === func)) return;
    // 数组中没有这个函数，push进去
    this.pond[name].push(func);
  }
  // 触发事件池中的事件
  $emit(name, ...arg) {
    let ary = this.pond[name] || [];
    ary.forEach((item) => {
      item(...arg);
    });
  }
  $off(name, func) {
    // 如果没有这个事件类型，直接return
    if (!this.pond[name]) return;
    let i = this.pond[name].indexOf(func);
    if (i === -1) return;
    this.pond[name].splice(i, 1);
  }
}
export default new EventBus();

用生命周期 componentDidMount 第一次渲染完成之后

给事件池增加方法

给事件池增加方法.

触发事件池中的方法

Vue组件间的通信

父子组件间

基于行内属性传参，props接收，父传子

自定义事件@xxx="fn",子组件内通过this.$emit('xxx'),子传父，实际上就是子组件调用父组件的函数并传参

祖宗组件和后代组件之间的传参

执行上下文或者叫做依赖注入

provide，inject；祖宗组件使用provide属性将数据传给后代，后代组件使用inject属性接收

$parent$ children/$refs

EventBus发布订阅实现的

$on('xx',func)把事件放入事件池中

$emit('xx',参数)执行事件池中的事件

vuex 公共状态管理

浏览器数据缓存

$attrs &$ listeners

......