跨组件通信

import React from 'react';
// 创建上下文件对象
const Context = React.createContext({});
// 从上下文中获取容器组件
// Provider 生产者容器组件 负责生产数据
// Consumer 消费者容器组件 负责使用数据
const {Provider, Consumer} = Context;
class Son extends React.Component {
  render() {
    return (
      
        {
          (value) => {
            return (
              

                
{value.name}
                
{value.age}
              
            )
          }
        }
      
    )
  }
}
class Father extends React.Component {
  render() {
    return (
      

        
Father
        
      
    );
  }
}
class App extends React.Component {
  render() {
    return (
      
        
App
        
      
    )
  }
}

export default App;

• 调用  React.createContext 函数创建一个  Context   上下文对象
• 从  Context 上下文对象中解构出  Provider 生产者组件和  Consumer 消费者组件
• 使用  Provider 组件的时候通过  value 属性生产数据
• 在后代组件中使用  Consumer 消费者组件消费  Provider 生产出来的数据
•  Consumer 消费者组件在使用时会自动调用一个回调函数，并将 Provider 生产出来的数据作为回调函数的第一个参数传递进去

上下文对象的第二种使用方法

import React from 'react';
// 创建上下文对象
const Context = React.createContext({
  name: 'xiebenyin',
  age: 66
});

class Son extends React.Component {
  render() {
    return (
      

        
Son
        
{this.context.name}
        
{this.context.age}
      
    )
  }
}
// 扩展一个静态属性
Son.contextType = Context
class Father extends React.Component {
  render() {
    return (
      

        
Father
        
      
    );
  }
}
class App extends React.Component {
  render() {
    return (
      

        
App
        
      
    )
  }
}

export default App;

• 调用  React.createContext 函数时传递一个参数作为数据
• 给任意一个类组件扩展一个静态属性  contextType  取值是  Context 上下文对象
• 在该组件中通过  this.context.name 就可以使用上下文中的数据

多个上下文对象的使用

import React from 'react';

// 创建两个上下文对象
const Context1 = React.createContext({});
const Context2 = React.createContext({});

class Son extends React.Component {
  render() {
    return (
      
        {
          (value1) => {
            return (
              
                {
                  (value2) => {
                    return (
                      

                        
{value1.name}
                        
{value2.age}
                      
                    )
                  }
                }
              
            )
          }
        }
      
    );
  }
}

class Father extends React.Component {
  render() {
    return (
      

        
Father
        
      
    )
  }
}

class App extends React.Component {
  render() {
    return (
      
        
          
App
          
        
      
    )
  }
}

export default App;

• 创建两个上下文对象  Context1 和  Context2 
• 使用  Context1.Provider 生产者组件通过  value  生产数据并在内部使用  Context2.Provider 生产者组件生产数据
• 在后代组件中，可以通过  Context1.Consumer 或  Context2.Consumer 消费者组件拿到各自上下文对象中生产出来的数据