React 的Provider、Consumer的使用

Provider、Consumer的官方文档

Provider、Consumer都是组件，Provider是数据的发出者，Consumer是数据的接收者，多用于第三方组件封装中。

简单介绍Provider、Consumer的使用

第一步建立context.js文件

import {createContext} from 'react'
// Provider,Consumer来源于同一个createContext()
const {Provider,Consumer} = createContext();
export {
  Provider,
  Consumer
}

第二步Provider的使用,Provider组件接受一个value属性，值可以是字符串也可以是对象等。

import React, {Component} from 'react'
import Child from './children'
import {Provider} from "./context";

// 类组件
class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'aa'
    }
  }

  render() {
    const {data} = this.props
    const {name}=this.state
    return (<div>
      <Provider value={data}>
        {
          data.map((item, index) => {
            return <div key={index}>
              <p>{item}</p>
            </div>
          })
        }
        <Child/>
      </Provider>
    </div>)
  }
}

export default App

第三步Consumer的使用 Consumer组件内可以通过匿名函数的形式接收Provider传过来的数据

import React, {Component} from 'react'
import {Consumer} from "./context";

export default class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'll'
    }
  }
  render() {
    console.log(3, '组件渲染虚拟dom')
    return (<Consumer>{
      // 接收Provider传过来的数据
      (data) => {
        console.log(data)
      }
    }</Consumer>)
  }
}