React 跨组件通信Context

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

提示：以下是本篇文章正文内容，下面案例可供参考

一、Context是什么？

问题场景：
上图是一个react形成的嵌套组件树，如果我们想要从APP组件向ComC组件传递消息，最暴力的方法是一层一层的props往下传，但是当层级过多的时候，会显得非常麻烦。所以Context因此出现了，Context不需要为每层的组件添加props，就能够实现跨组件通信，有点类似于redux。

二、使用步骤

1.引入库

//使用context实现跨组件通信
import React, { createContext } from "react";
//嵌套关系 APP->A->C

//1.创建Context对象
const { Provider, Consumer } = createContext();

function ComA() {
  return (
    <div>
      组件A
      <ComC></ComC>
    </div>
  );
}
function ComC() {
  //3通过Comsumer获取数据
  return (
    <div>
      组件C
      <Consumer>{(value) => <span>{value}</span>}</Consumer>
    </div>
  );
}

class App extends React.Component {
  state = {
    message: "要传递的消息",
  };
  render() {
    return (
      //2.使用provider包裹根组件
      <Provider value={this.state.message}>
        <div className="App">
          <ComA></ComA>
        </div>
      </Provider>
    );
  }
}

export default App;

效果如图:

总结