React createContext优化方案contextType

news2024/11/20 15:28:22

我们先来看个这样的组件

import React,{createContext} from "react"

const ThemeContext = createContext();

export default class Demo14 extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        theme:"red"
      }
    }
    render(){
      const { theme } = this.state;
      return (
        <div>
          <ThemeContext.Provider value = { theme }>
            <Middle></Middle>
          </ThemeContext.Provider>
        </div>
      )
    }
}

class Middle extends React.Component{
  render(){
    return (
      <div>
        <Bottom></Bottom>
      </div>
    )
  }
}

class Bottom extends React.Component{
  render(){
    return (
      <div>
        <ThemeContext.Consumer>
          {
            theme  => <h1>{ theme }</h1>
          }
        </ThemeContext.Consumer>
      </div>
    )
  }
}

我这里为了方便直接三个组件写同一个文件里了
首先跟组件调用了 Middle 组件定义 ThemeContext 接收 createContext
然后通过ThemeContext.Provider传递值 value是字符串类型的red

然后 Middle 组件中调用了Bottom
Bottom中获取了theme的值并输出

但有个优化方案老实说我并不见得这个代码很丑
但是官方其实又给我们提供了一个contextType
将 Bottom 代码改成这样

class Bottom extends React.Component{
  static contextType = ThemeContext;
  render(){
    const theme = this.context
    return (
      <div>
          <h1>{ theme }</h1>
      </div>
    )
  }
}