react context Provider Consumer 怎么用

context解决了什么问题

避免了多层嵌套组件之间

function 最外层组件 (props) {
    let 参数=1
    return(
        <>
            <中间层组件 参数={参数}/>
        </>
    )
}
function 中间层组件 (props) {
    let 参数=props.参数
    return(
        <>
            <最内部组件 参数={参数}/>
        </>
    )
}
function 最内部组件 (props) {
    return(
        <>
            {props.参数} //经过层层传递终于拿到了想要的参数~
        </>
    )
}

如何使用

函数组件

1. 声明 context

const MyContext=React.createContext(初始值) //也可以不设置初始值

2. 提供值

• 1 某个外层组件中,Provider 提供值，设置要传递的value
• 2 或者不包裹 那么拿值的时候拿到的是初始值

1 Provider包裹，初始值被覆盖为现在设置的值
<MyContext.Provider value={'哈哈哈'}>
                <内层组件/>
</MyContext.Provider>
2 什么都不做 下面拿的值是初始值
  <内层组件/>

2. 消费

• 1 被Context.Provider包裹内层组件，或者内层的内层随便嵌套,Consume,消费值，即使用Provider提供的value
• 2 或者使用useContext 获取值

1.Counsumer
<MyContext.Consumer>
        {
            value=>value /* 基于这个值进行渲染工作 */
     	}
</MyContext.Consumer>
2. useContext
const mycontext=useContext(MyContext)//mycontext就是传递的值

类组件

和函数组件一样
只不过useContext变成了static contextType = MyContext;

1. 声明context

const MyContext=React.createContext() 

2. 声明contextType 指向创建的context

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

详细官方文档

react context