【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

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

Context.Consumer

  • 语法: {(value)=>{}}
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;
  • 运行结果
    【React】Context 跨组件通信_第1张图片

案例 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】Context 跨组件通信_第2张图片

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

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

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

你可能感兴趣的:(React,全家桶,context,用法)