新老版本react context使用

1、老版本react context使用

在react@16.x版本之前都是用的老版本context，主要通过React.Component中静态方法getChildContext、静态属性childContextTypes、contextTypes实现的。

• getChildContext 根组件中声明，一个函数，返回一个对象，就是context
• childContextTypes 根组件中声明，指定context的结构类型，如不指定，会产生错误
• contextTypes 子孙组件中声明，指定要接收的context的结构类型，可以只是context的一部分结构。contextTypes 没有定义，context将是一个空对象。
• this.context 在子孙组件中通过此来获取上下文

举个例子看看他们的用法：

项目使用react@15.0.0和react-dom@15.0.0，使用babel-loader解析时需要在plugins中@babel/plugin-proposal-class-properties，因为静态属性写法属于ES7范畴，目前游览器还不支持。

Parent.jsx

import React from 'react'
import PropTypes from 'prop-types'
import Child from './Child'

export default class Parent extends React.Component {

  static childContextTypes = {
    color: PropTypes.string.isRequired,
    size: PropTypes.number.isRequired
  }

  getChildContext() {
    return { color: 'red', size: 20 }
  }

  render() {
    return <Child />
  }
}

Child.jsx

import React from 'react'
import Son from './Son'

export default class Child extends React.Component {
  render() {
    return <Son />
  }
}

Son.jsx

import React from 'react'
import PropTypes from 'prop-types'

export default class Son extends React.Component {

  static contextTypes = {
    color: PropTypes.string.isRequired,
    size: PropTypes.number.isRequired
  }

  render() {
    return <p style={{'color': this.context.color, 'fontSize': this.context.size}}>hello, world</p>
  }
}

效果：

2、新版本react context使用

项目使用react@16.x、react-dom@16.x
Parent.jsx

import React from 'react'
import Child from './Child'
import MyContext from './context'

const Parent = props => {

  const initStyle = {
    style: {
      color: 'red',
      size: 20
    }
  }

  const [pStyle] = React.useState(initStyle)

  return <MyContext.Provider value={pStyle}><Child /></MyContext.Provider>
}

export default Parent

Child.jsx

import React from 'react'
import Son from './Son'

const Child = props => {
  return <Son />
}

export default Child

Son.jsx

import React from 'react'
import MyContext from './context'

const Son = props => {
  const context = React.useContext(MyContext);
  return <p style={{'color': context.style.color, 'fontSize': context.style.size}}>hello, world</p>
}

export default Son

效果:

参考：
https://www.cnblogs.com/mengf...