Reaccionar el uso del contexto

El contexto proporciona una manera de pasar datos entre árboles de componentes sin agregar manualmente accesorios para cada capa de componentes.

1. Uso

Reaccionar.createContext

const MyContext = React.createContext(defaultValue);

Crea un objeto de contexto. Cuando React representa un componente suscrito a este objeto Context, el componente leerá el valor de contexto actual del Proveedor coincidente más cercano a él en el árbol de componentes.

Solo cuando no haya ningún proveedor coincidente en el árbol donde se encuentra el componente, su parámetro defaultValue entrará en vigor. Esto ayuda a probar componentes sin utilizar un proveedor para empaquetar el componente. Nota: Cuando se pasa indefinido al valor del proveedor, el valor predeterminado del componente consumidor no tendrá efecto.

Contexto.Proveedor

<MyContext.Provider value={/* 某个值 */}>

Cada objeto Context devuelve un componente Provider React, que permite que los componentes consumidores se suscriban a los cambios de contexto.

El proveedor recibe un atributo de valor y lo pasa al componente consumidor. Un Proveedor puede tener una relación correspondiente con múltiples componentes de consumidores. También se pueden utilizar varios proveedores anidados y la capa interna sobrescribirá los datos de la capa externa.

Contexto.Consumidor

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

Aquí, los componentes de React también pueden suscribirse a cambios de contexto. Esto le permite suscribirse al contexto en componentes funcionales.

2. Aplicación de ejemplo

Como se muestra en la figura, se definen dos variables en el componente principal: fruta y recuento. El componente secundario puede obtener el fruto del componente principal y el componente secundario puede obtener el fruto del componente principal y puede cambiar el valor del recuento.

Los pasos de implementación son los siguientes:

2.1 Crear un nuevo archivo context.js

Cree un objeto Context y exporte los contenedores Proveedor y Consumidor.

import { createContext } from 'react'

export const { Provider, Consumer } = createContext()

2.2 Crear un nuevo componente principal index.js

import React, { Component } from 'react'
import { Provider } from './context' // 引入Provider
import Son from './Son' // 引入子组件

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {
      fruit: 'apple',
      count: 0,
    }
  }

  componentDidMount() {}

  getContext = () => {
    const { fruit, count } = this.state
    return {
      fruit,
      countUtil: {
        addCount: num => {
          this.setState({
            count: count + num,
          })
        },
        delCount: num => {
          this.setState({
            count: count - num,
          })
        },
      },
    }
  }

  render() {
    const { fruit, count } = this.state
    return (
      // Provider 容器, 其value接收一个getContext方法
      <Provider value={this.getContext()}>
        父组件 fruit = {fruit}, count = {count}
        <hr />
        <Son />
      </Provider>
    )
  }
}

export default Main

2.3 Crear un nuevo subcomponente Son.js

import React, { Component } from 'react'
import { Consumer } from './context' // 引入Consumer
import GrandSon from './GrandSon' // 引入子子组件

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      // Consumer 容器,可以拿到父组件传递下来的 fruit 属性, 并可以展示对应的值
      <Consumer>
        {context => (
          <div>
            子组件 fruit={context.fruit}
            <hr />
            <GrandSon />
          </div>
        )}
      </Consumer>
    )
  }
}

export default Main

2.4 Crear un nuevo subcomponente GrandSon.js

import React, { Component } from 'react'
import { Consumer } from './context' // 引入Consumer

class Main extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      // Consumer 容器,可以拿到父组件传递下来的 fruit 属性, 以及 countUtil对象下的 addCount 和 delCount 方法
      <Consumer>
        {context => (
          <div>
            子子组件 fruit={context.fruit}
            <br />
            <button type="button" onClick={() => context.countUtil.addCount(2)}>
              加2
            </button>
            &nbsp;
            <button type="button" onClick={() => context.countUtil.delCount(3)}>
              减3
            </button>
            <hr />
          </div>
        )}
      </Consumer>
    )
  }
}

export default Main