React 基础笔记(React使用全局Context)(二十九)

React-Context 的作用

在 React 中使用父子孙传值 一般都用的是 props 这样一层一层传递下去。但是要是 4 层,5 层,这样传值就非常复杂所以就有了 Context 的用武之地。它可以把数据直接传递到使用的组件里。不过要慎用因为它破坏了组件的完整性

使用开始

父组件必须使用 Provider

• 第一步引入

import React, { Component, Fragment, createContext } from 'react'
//创建公共数据
//开始使用context
export const PublicDataOne = createContext() //createContext 里面可以加默认值,必须暴露出去这样下层组件才能使用
export const PublicDataTwo = createContext() //createContext 里面可以加默认值,必须暴露出去这样下层组件才能使用

• 第二步父组件里面必须包裹要传递两个公共数据就必须包裹两层

<Fragment>
  <PublicDataOne.Provider value={this.state.publicDataOne}>
    <PublicDataTwo.Provider value={this.state.publicDataTwo}>
      <Second></Second>
    </PublicDataTwo.Provider>
  </PublicDataOne.Provider>
  <button onClick={this.handleClick}>改变</button>
</Fragment>

• 完整父组件

import React, { Component, Fragment, createContext } from 'react'

//加载组件
import Second from './Twowrapper.js'
//开始使用context
export const PublicDataOne = createContext() //createContext 里面可以加参数
export const PublicDataTwo = createContext() //createContext 里面可以加参数

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '首页',
      publicDataOne: 60,
      publicDataTwo: 1,
    }
    this.handleClick = this.handleClick.bind(this)
  }
  render() {
    return (
      <Fragment>
        <PublicDataOne.Provider value={this.state.publicDataOne}>
          <PublicDataTwo.Provider value={this.state.publicDataTwo}>
            <Second></Second>
          </PublicDataTwo.Provider>
        </PublicDataOne.Provider>
        <button onClick={this.handleClick}>改变</button>
      </Fragment>
    )
  }
  handleClick() {
    console.log('点击了')
    let value1 = this.state.publicDataOne
    let value2 = this.state.publicDataTwo
    console.log(value1 + '||' + value2)
    this.setState({
      publicDataOne: value1 - 1,
      publicDataTwo: value2 + 1,
    })
  }
}

export default App

要使用的数据组件,子组件就是引入孙组件，这里就是孙组件

• 必须加 {} 哪怕只有一个公共数据,也必须加{},因为他还加个默认值

• 子组件里面使用 Consumer

孙组件里面这里必须要注意必须有包裹层,里面是个函数 函数返回数据 有几个公共数据就有几个包裹层，有几个包裹层就有几个 return

import React, { Component, Fragment } from 'react'
import { PublicDataOne, PublicDataTwo } from './App'
class ThirdWrapper extends Component {
  constructor(props) {
    super(props)
    this.state = {
      message: '第三层使用公共数据',
    }
  }
  render() {
    return (
      <Fragment>
        <div>
          {this.state.message}
          <PublicDataOne.Consumer>
            {(value) => {
              return (
                <PublicDataTwo.Consumer>
                  {(valueTwo) => {
                    return (
                      <h1>
                        这就是第一个公共数据{value} 这就是第二个公共数据
                        {valueTwo}
                      </h1>
                    )
                  }}
                </PublicDataTwo.Consumer>
              )
            }}
          </PublicDataOne.Consumer>
        </div>
      </Fragment>
    )
  }
}

export default ThirdWrapper