context上下文数据传递

props的缺点

通常情况下，组件之间的数据传递可以通过props传递，但是props数据的传递是必须是一一传递，比如有三个组件：A、B、C, 其中B组件是A组件的子组件，C组件是B组件的子组件，如果A组件的数据要传递给C组件，就需要A->B->C,数据的传递不能跨级，用起来就比较麻烦

Context的优点

组件之间的数据传递是可以跨级的，只有起点和终点

使用步骤

1. 创建context.js,内容如下：

import React from 'react'
//创建context对象
const MyContext=React.createContext();
//Provider:生产商(提供公共数据)
//Consumer:用户(用户使用公共数据)
const {Provider,Consumer}=MyContext
export {MyContext,Provider,Consumer}

2. 创建Father.js(A组件)

import React, { useState } from 'react';
import {Provider} from './context';
import Son from './Son'
const Facther = () => {
  // hook state定义数据和修改数据
   const [username,setUsername]=useState('小明')
   return (
//  value里定义的就是公共数据或者方法
       <Provider value={{
           username,setUsername
       }}>
      <Son />
  </Provider>
   );
}

export default Facther;

3. 创建Son组件(C组件)

import React from 'react';
import {Consumer} from './context'
const Son = () => {
    return (
        <Consumer>
          {/*Comsumer中带有一个回调函数，参数就是context(我们的上下文数据) {username,setUsername}=context,进行了es6语法结构*/}
         
            {({username,setUsername})=>{
                return <p onClick={()=>{setUsername('王老五')}}>{username}</p>
            }}
        </Consumer>
    );
}

export default Son;

这样就通过了A组件到C组件之间的数据传递