react组件通信的几种方式

在react中常见的几种情况如下：

 1.父子组件通信
 2.跨级组件通信
 3.非嵌套组件通信

父子通信
1.父传子 —》props
2.子传父 —》props+回调函数

跨级组件通信
1.props 逐层传递 (不考虑)
2.context 传递

 context是一个全局变量,像是一个大容器,在任何地方都可以访问到,我们可以把要通信的   信息放在context上,然后在其他组件中可以随意取到。
 但是React官方不建议使用大量context,尽管他可以减少逐层传递,但是当组件结构复杂的时候,我们并不知道context是从哪里传过来的;当传递内容很多时可以考虑redux。

 传递方式：提供者
 接收方式：1.contextType => 提供者value  2.消费者 =>提供者value

 要用同一个创建的 React.createContext

(1)类组价context
一个context：

import React, {
    Component, createContext } from 'react';
const BatteryContext = createContext();
//声明一个孙组件
class Leaf extends Component {
   
  render() {
   
    return (
      <BatteryContext.Consumer>
        {
   
          battery => <h1>Battery : {
   battery}</h1>
        }
      </BatteryContext.Consumer>
      //{this.context}
    )
  }
}
//Leaf .contextType = BatteryContext ;

//声明一个子组件
class Middle extends Component {
   
  render() {
   
    return <Leaf />
  }
}

class App extends Component {
   
  state = {
   
    battery: 60
  }
  render() {
   
    const {
    battery } = this.state;
    return (
      <BatteryContext.Provider value={
   battery}>
        <button
          type="button"
          onClick={
   () => this.setState({
    battery: battery - 1 })}
        >
          减减
        </button>
        <Middle />
      </BatteryContext.Provider>
    );
  }

}

export default App;

多个context：

import React, {
    Component, createContext } from 'react';
const BatteryContext = createContext();
const OnLineContext = createContext();
//声明一个孙组件
class Leaf extends Component {
   
  render() {
   
    return (
      //与Provider类似。Consumer也需要嵌套，顺序不重要。只要Consumer需要声明函数，所以要注意语法。
      <BatteryContext.Consumer>
        {
   
          battery => (
            <OnLineContext.Consumer>

react组件通信的几种方式

悦读