react context 的使用

• 看了react context 语法，记录一下使用方式
• context 的定义 提供了一种方式，能够让数据在组件树种传递而不必一级一级手动传递
• 什么意思呢，举一个前端很常见的例子， 就是我们在写组件时，如果组件有三层，分别是父，儿，孙 组件，父组件给孙组件穿参数，需要一个层一层的 props 传递，这其实对于 儿 组价你没有任何的意义。 context 就是可以直接让 父 组件直接给 孙 组件传递，不需要经过 儿 组件。
• 其实就像一个全局的属性一样。
• 下面上代码

import React, { Component, createContext } from 'react'
// 使用 Context 跨数据树，传递数据


const TestContext = createContext()
const OnlineContext = createContext()
class Grandson extends Component {
  render() {
    return (
      <TestContext.Consumer>
        {
          count => (
            <OnlineContext.Consumer>
              {
                online => <h1>count: { count }, online: { String(online) }</h1>
              }
            </OnlineContext.Consumer>
          )
        }
      </TestContext.Consumer>
    )
  }
}


class Child extends Component {
  render() {
    return <Grandson></Grandson>
  }
}

class Test extends Component {

  state = {
    online: false,
    count: 60
  }

  render() {
    const { count, online } = this.state
    return (
      <TestContext.Provider value={count} >
        <OnlineContext.Provider value={online}>
          <button type="button" onClick={() => this.setState({ online: !online })}>true</button>
          <button type="button" onClick={() => this.setState({ count: count - 1 })}>press</button>
          <Child/>
        </OnlineContext.Provider>
      </TestContext.Provider>
    )
  }
}

export default Test

contextType 的使用

• 不需要写 Consumer 直接用 this.context

class Grandson extends Component {
  static contextType = TestContext

  render() {
    const count = this.context
    return (
      <h1>count: { count }</h1>
    )
  }
}