Context

Context with class component

创建上下文 [myContext.context.jsx]

import React from "react"

const MyContext = React.createContext()

export default MyContext

父级组件 [parent.component.jsx]

import React from "react"
import Child1Component from "./demo23.child1.component"
import Child2Component from "./demo23.child2.component"
import MyContext from "./demo23.context"
export default class ParentComponent extends React.Component {
  state = {
    val1: 0,
    val2: 0,
  }

  changeVal1 = () => {
    this.setState({
      ...this.state,
      val1: this.state.val1 + 1,
    })
  }

  changeVal2 = () => {
    this.setState({
      ...this.state,
      val2: this.state.val2 + 1,
    })
  }

  render() {
    let { val1, val2 } = this.state
    return (
      <div>
        {/* 使用XXContext.Provicer包裹所有父级组件内容 */}
        <MyContext.Provider value={{ val1, val2 }}>
          {/* 子组件也包裹在内，否则会报错 */}
          <Child1Component />
          <Child2Component />
          <div>
            <button onClick={this.changeVal1}>increase val1</button>
            <button onClick={this.changeVal2}>increase val2</button>
          </div>
        </MyContext.Provider>
      </div>
    )
  }
}

子组件1，用法一 [child1.component.jsx]

import React from "react"
import MyContext from "./demo23.context"
export default class ChildComponent extends React.Component {
  // 将上下文挂在类静态变量contextType上
  static contextType = MyContext
  render() {
    // 使用时，直接从context中获取
    let { val1 } = this.context
    return <div>{val1}</div>
  }
}

子组件2，用法二 [child2.component.jsx]

import React from "react"
import MyContext from "./demo23.context"
export default class ChildComponent extends React.Component {
  render() {
    return (
      // 使用XContext.Consumer取得上下文数值
      // 这种方式在functional component组件中同样适用
      <MyContext.Consumer>
        {(context) => {
          return <div>{context.val2}</div>
        }}
      </MyContext.Consumer>
    )
  }
}

Context with functional component

创建上下文 [myContext.context.jsx]

import React from "react"

const MyContext = React.createContext()

export default MyContext

父组件

import React, { useState } from "react"
import ChildComponent from "./demo24.child1.functionalcomponent"
import MyContext from "./demo24.context"
export default function ParentComponent() {
  const [val, setVal] = useState(0)

  const changeVal = () => {
    setVal(val + 1)
  }

  return (
    <div>
      {/* 这里父组件的使用方法和class component一样 */}
      <MyContext.Provider value={{ val }}>
        <ChildComponent />
        <div>
          <button onClick={changeVal}>increase val</button>
        </div>
      </MyContext.Provider>
    </div>
  )
}

子组件

import React, { useContext } from "react"
import MyContext from "./demo24.context"
export default function ChildComponent() {
  // functional component 提供hook函数，直接使用
  let { val } = useContext(MyContext)
  return <div>{val}</div>
}