context的演变

也可直接阅读官方文档 https://reactjs.org/docs/context.html

旧版本使用方式 getChildContext

import React from 'react';
import PropTypes from 'prop-types';
import './App.css';
class Child extends React.Component{
  static contextTypes = {
    a: PropTypes.number
  }
  render(){
    console.log(this.context,'Child')
    return <div />
  }
} 
// props:  color : stirng    
export default class App extends React.Component{
  static childContextTypes= {
    a: PropTypes.number
  }
  getChildContext(){
    return {
      a:1
    }
  }
  render(){
    return (
      <div>
        <Child />
      </div>
    )
  }
}

不再建议这样使用，react17版本会正式弃用这种使用方式。

新版使用方式 CreateContext

import React, { createContext } from 'react';
import './App.css';
export const myContext = createContext({
  a:2
});  
class Child extends React.Component{
  static contextType = myContext
  render(){
    console.log(this,'Child')
    return <div> {this.context?.a} <div>
  }
} 
class App extends React.Component{
  render(){
    return (
       // 如果打开下面的注释，那么Child中的this.context取值为 {a:4},即Provider的value值
       // 现在取的是默认值，即 {a: 2}
        // <myContext.Provider value={{a:4}}>
          <Child />
        // </myContext.Provider>
    )
  }
}
export default  App;

注意，允许创建多个context，具体组件中的 this.context 由 static contextType 决定。
需要更新context的话，直接用 的形式去更新value值即可。

Context

使用hooks