第12节-Context的Api

Context

• api
• 嵌套使用

Context.Provider Context.Provider

• 是通过 React.createContext 创建出来的一个组件
• Provider组件可以插入其它组件目的 -> 订阅这个Context
• 通过Provider的value属性来将数据传递给Consumer组件
• value变化,插入Provider的组件都会重新渲染
• new and old value -> 算法的对比 -> Object.is相同的算法

Context.Consumer

• 作用: 订阅context的变更
• Consumer内部使用函数作为子元素 -> function as a child
• 函数接收context最近的Provider提供的value
• 如果没有 Provider回去找 默认值

import React, { Component } from 'react'

const AContext = React.createContext('default a')
const BContext = React.createContext('default b')

// => 针对dev-tools对 AContext.Provider重命名,提供一个具体的名称方便调试
// => 也有可能不起效果(哈哈)
AContext.displayName = 'A Context'

/**
 * Context.Provider
 * 是通过 React.createContext 创建出来的一个组件
 * Provider组件可以插入其它组件目的 -> 订阅这个Context
 * 通过Provider的value属性来将数据传递给Consumer组件
 * 
 * value变化,插入Provider的组件都会重新渲染
 * new and old value -> 算法的对比 -> Object.is相同的算法
 */
export default class App extends Component {
  state = {
    a: 'a context',
    b: 'b context'
  }
  render() {
    return (
      <>
        <BContext.Provider value={this.state.b}>
          <AContext.Provider value={this.state.a}>
            <Test />
          </AContext.Provider>
        </BContext.Provider>
        <hr />
        {/* 下面的是没有 Provider 的情况会使用默认值,其它场景均不使用默认参数 */}
        {/* 如果有 Provider但是为null不会使用默认值*/}
        <Test />
      </>

    )
  }
}

class Test extends Component {
  render() {
    return (
      <>
        {/* 可以嵌套 */}
        <BContext.Consumer>
          {
            (value) => (
              <AContext.Consumer>
                {
                  (value) => (
                    // 这个value是A的,会找最近的消费组件
                    <div>{value}</div>
                  )
                }
              </AContext.Consumer>
            )
          }
        </BContext.Consumer>
        <BContext.Consumer>
          {
            (valueB) => (
              <AContext.Consumer>
                {
                  (valueA) => (
                    <div>{valueA} -- {valueB}</div>
                  )
                }
              </AContext.Consumer>
            )
          }
        </BContext.Consumer>
      </>

    )
  }
}

补充

contextType (看上一节代码)

• 是class的静态属性,必须赋值一个React.createContext()的一个context对象
• static contextType = xxContext
  • 作用: 给当前环境下的context重新指定引用
  • this.context -> xxContext
  • 在生命周期函数和render函数中都可以访问
• 语义化不是很好,长期不看代码有点晕(哈哈)