React 中 Context

context是为了解决组件多层嵌套时，不同层级通讯繁琐的React内置的一个插件

createContext（默认值），创建一个context

context内包含了 Provider、Consumer

import React, { createContext } from 'react'
const { Provider, Consumer } = createContext('light') // 这里把这两个解构出来

首先我有三个组件，分别是 Person、Test、Child，三个组件按顺序嵌套

1.Person

import React, { createContext } from 'react'
import Test from '../test' // 子组件Test

export const { Provider, Consumer } = createContext('light') // 这里抛出是为了Person下的子组件可以从这里引入需要使用的

export default class Person extends React.PureComponent {
  render() {
    return (
      <div>
        <Provider value="小花"> // 这里使用Provider包裹，将要传递的值注入
          <Test />
        </Provider>
      </div>
    )
  }
}

2.Test

import React from 'react'
import { Consumer } from '../person' // 从父组件中引入
import Child from '../child' // 子组件Child

export default class Test extends React.PureComponent {
  render() {
    return (
      <div>
        <Consumer>
          {
            // 回调函数，第一个参数可以取到父组件注入的值，这里的写法就是这样，
            () => <Child />
          }
        </Consumer>
      </div>
    )
  }
}

3.Child

import React from 'react'
import { Consumer } from '../person'

export default class Child extends React.PureComponent {
  render() {
    return (
      <div>
        <Consumer>
          {
            value => { // 这里的回调取到父组件注入的值进行展示
              return <p>{value}</p>
            }
          }
        </Consumer>
      </div>
    )
  }
}

然后还有一种写法，就是createContext创建时的默认值也是可以进行传递的，这里只用修改Person组件的代码

import React, { createContext } from 'react'
import Test from '../test'

export const { Provider, Consumer } = createContext('light')

export default class Person extends React.PureComponent {
  render() {
    return (
      <div> // 去掉了Provider, 默认值light就会传递到子组件
        <Test />
      </div>
    )
  }
}