React-Context(上下文)作用和使用

快来打我* 2022-12-13 11:18 153阅读 0赞

# Ⅰ- 壹 - React-Context(上下文) #

定义: Context提供了一种方式，能够让数据在组件树中传递，而不必一级一级手动传递。

## 大概简述 ##

1.  首先需要创建一个上下文的容器：React.createContext

export const {  Provider,Consumer }=createContext()

1.  Provider(生产者): 用于生产共享数据的地方。

<Provider value={ /*共享的数据*/}>
        /*里面可以渲染对应的内容*/
    </Provider>

Consumer(消费者):Consumer需要嵌套在生产者下面。才能通过回调的方式拿到共享的数据源。当然也可以单独使用，那就只能消费到上文提到的defaultValue

<Consumer>
      { value => /*根据上下文 进行渲染相应内容*/}
    </Consumer>

## 简单使用 ##

1.  首先创建react脚手架,能看这个的估计都会我就不演示了
2.  在src创建两个jsx文件，Context.jsx,Son.jsx，Grandson.jsx
3.  index.js 导入Context.jsx并且挂载

### index.js ###

import React from 'react';
    import ReactDOM from 'react-dom';
    import Contextfrom './Context'
    ReactDOM.render(
      <Context></Context>,
      document.getElementById('root')
    );

### Context.jsx ###

//结构createContext 
    import React, {  Component, createContext } from 'react'
    import Son from "./Son"; //导入子组件
    
     创建一个 Context, 并且导出
    export const {  Provider,Consumer }=createContext()
    
    
    export default class Context extends Component { 
      constructor(props) {  
        super(props)
      }
      state = { 
        name:"上下文"
      }
      render() { 
        return (
    
          <div>
            <p>React Context(上下文)</p>
            //Provider共享容器 接收一个name属性
            <Provider value={ this.state.name}>
              <div>生产者</div>
              <Son></Son>
            </Provider>
          </div>
        ) 
      }
    }

### Son.jsx ###

import React from 'react'
    import {  Consumer } from "./Context";//引入父组件的Consumer容器
    export default function Son(props) { 
    
      return (
        <div>
          <Consumer>
            { 
              (value) => {  
                return <p> { value}</p>
              }
            }
          </Consumer>
        </div>
      )
    }

### Grandson.jsx ###

import React from 'react'
    import {  Consumer } from "./Context";
    export default function Grandson(props) { 
    
      return (
        <div>
          <Consumer>
            { 
              (value) => {  
                return <p>孙组件获取的数据 { value}</p>
              }
            }
          </Consumer>
        </div>
      )
    }