新老版本react context使用

1、老版本react context使用

[email protected]版本之前都是用的老版本context,主要通过React.Component中静态方法getChildContext、静态属性childContextTypes、contextTypes实现的。

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

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

项目使用[email protected][email protected],使用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.jsx

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

export default class Child extends React.Component {
  render() {
    return 
  }
}

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 

hello, world

} }

效果:
image.png

2、新版本react context使用

项目使用[email protected][email protected]
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 
}

export default Parent

Child.jsx

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

const Child = props => {
  return 
}

export default Child

Son.jsx

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

const Son = props => {
  const context = React.useContext(MyContext);
  return 

hello, world

} export default Son

效果:
image.png

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

你可能感兴趣的:(context,react.js)