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

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

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

大概简述

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

export const { Provider,Consumer }=createContext()

2. 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>
  )
}