React 18 系统精讲（八）使用context和useContext

context上下文主要用来组件间传值，不局限于父子组件，也可以直接用于爷爷和孙子组件间传值或者其他跨组件情况传值;

使用方法：

父组件中:
1、使用React. createContext 方法创建上下文关系对象并导出（createContext参数必传）

export const indexContext = React.createContext(defaultAPPContext);

2、使用 indexContext.Provider，包裹想要使用此数据的子组件，并传入value为上面创建contxt对象时传入的默认值对象

子组件中使用步骤:
1、在需要使用的子组件 引入{indexContext}，../是向上找了两极

import  {indexContext}  from "../index"; 

2：使用消费数据方式（类组件中使用）:
    在函数组件中使用indexContext.Consumer标签来包裹返回的jsx，返回的jsx内容作为剪头函数的函数体，同时传入参数value;

 以下为语法：

<indexContext.Consumer> 
   {(value) => {
        return(

         )
    }}
</indexContext.Consumer>

3：hooks中提供了 useContext 钩子(用起来更方便，仅针对于函数式组件):

      引入useContext ：

import  { useContext } from 'react';

     使用useContext方法获取数据：

const  newIndexContext = useContext(indexContext); 

     然后就可以直接使用了：