【React】Context 跨组件通信

基本用法

在 react 没有类似 vue 中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react 提供了 context api 来实现跨组件通信, React 16.3 之后的 contextapi 较之前的好用。

在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。

• context的实现需要借助react中的createContext()方法，该方法返回一个对象
• 设计思路：

1. 卖家：发送数据的组件
2. 买家：接收数据的组件
3. 商品：数据
4. provider（卖家） consumer（买家）

• 用法：

5. 先创建出context对象（ 通过createContext() ）
6. 从context对象中取出2个组件
	Provider：给父组件使用
	Consumer：给子组件使用
7. 在发送数据的那方，将需要的数据赋值给Provider组件的value属性
8. 在接收数据的那方，可以使用Consumer组件接收数据（通过静态属性形式接收）
9. 商品在售卖的时候，只能逐级出售，例如生产商卖给超市，超市卖给顾客，不能出现生产商卖给顾客

Context.Provider：

• 语法：<MyContext.Provider value={/* 某个值 */}>

1. Provider 接收一个 value 属性，传递给消费组件。
2. 一个 Provider 可以和多个消费组件有对应关系。
3. 多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。
4. 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。
5. Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数。
6. 因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。
7. 通过新旧值检测来确定变化，使用了与 Object.is 相同的算法。

Context.Consumer：

• 语法：<MyContext.Consumer> {(value)=>{}}</MyContext.Consumer>

1. 需要函数作为子元素（function as a child）这种做法。
2. 这个函数接收当前的 context 值，返回一个 React 节点。
3. 传递给函数的 value 值等同于往上组件树离这个 context 最近的 Provider 提供的 value 值。
4. 如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。

注意事项：

因为 context 会使用参考标识（reference identity）来决定何时进行渲染，这里可能会有一些陷阱，当 provider 的父组件进行重渲染时，可能会在 consumers 组件中触发意外的渲染。举个例子，当每一次 Provider 重渲染时，以下的代码会重渲染所有下面的 consumers 组件，因为 value 属性总是被赋值为新的对象：

class App extends React.Component {
  render() {
    return (
      <MyContext.Provider value={{something: 'something'}}>
        <Toolbar />
      </MyContext.Provider>
    );
  }
}

• 为了防止这种情况，将 value 状态提升到父节点的 state 里：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {something: 'something'},
    };
  }

  render() {
    return (
      <Provider value={this.state.value}>
        <Toolbar />
      </Provider>
    );
  }
}

---

案例分析

• 目录src/context/index.js

// 导入createContext方法
import { createContext } from "react";

// 导出
export default createContext();

// 其他组件调用的时候，尽量换个名称接收
// 如：import myContext from './context/index.js';

案例 1：

import React, { Component } from 'react';
// 导入context对象
import myContext from "./context/index.js";
// 产生卖家身份、产生买家身份
let {Provider, Consumer} = myContext;

class App extends Component {
    // 准备好数据
    state = {
        msg1:"1号商品",
        msg2:"2号商品",
    }
    render() {
        return (
            <div>
                {/* 想要哪些组件可以购买我们的商品，则通过Provider包裹，通过value告诉消费者，我们售卖的东西是啥 */}
                <Provider value={this.state}>
                    <Cmp1></Cmp1>
                    <Cmp2></Cmp2>
                </Provider>
            </div>
        );
    }
}

class Cmp1 extends Component {
    render() {
        return (
            <div>
                <h2>这是Cmp1顾客</h2>
                {/* 第一种消费的方式：通过消费组件Consumer, 必须要函数作为它的子元素 */}
                <Consumer>
                    {
                        (val) => {return "Cmp1买到的是：" + val.msg1}
                    }
                </Consumer>
            </div>
        );
    }
}

class Cmp2 extends Component {
    // 第二种消费方式：通过绑定静态属性的方式，属性名固定是contextType
    // 后续需要获取消费到的数据，则通过this.context进行获取
    // 注意点：contextType只能在类组件使用，且只能出现一次
    static contextType = myContext;
    render() {
        return (
            <div>
                <h2>这是Cmp2顾客</h2>
                <div>Cmp2买到的是：{this.context.msg2}</div>
                <Cmp3></Cmp3>
            </div>
        );
    }
}

class Cmp3 extends Component {
    render() {
        return (
            <div>
                <h2>这是Cmp3顾客</h2>
                <Consumer>
                    {
                        (val) => {return "Cmp1买到的是：" + val.msg2}
                    }
                </Consumer>
            </div>
        );
    }
}


export default App;

• 运行结果
  

---

案例 2：

• App.jsx文件

import React, { Component } from 'react';
import myContext from './context/index.js';
class ChildA extends Component {
    static contextType = myContext;
    render() {
        console.log(this);
        return (<div><h2>A组件</h2>{this.context}</div>);
    }
}
class ChildB extends Component {
    render() {
        return (<div>
            <h2>B组件</h2>
            <ChildC></ChildC>
        </div>);
    }
}
//函数式组件中没有this，所以我们按下面的方式写
const ChildC = function () {
    return (
        <div>
            <h3>C组件</h3>
            {
                <myContext.Consumer>
                    {
                        (value) => <div>{value}</div>
                    }
                </myContext.Consumer>
            }
            <ChildD />
        </div>
    )
}
const ChildD = function () {
    return (
        <div><h3>D组件</h3></div>
    )
}
class App extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }
    render() {
        return (<myContext.Provider value="hello">
            <ChildA />
            <ChildB />
        </myContext.Provider>);
    }
}
export default App;

• 运行结果
  

• 复杂的非父子组件通信在react中很难处理

• 多组件间的数据共享也不好处理

• 在实际的工作中我们会使用flux、redux、mobx来实现