context 传统的类组件的写法和 hooks 写法

react中的context是什么呢

Context 通过组件树提供了⼀个传递数据的⽅法，从⽽避免了在每⼀个层级⼿动的传递 props 属性。
⽂档也没具体给出context到底是什么，⽽是告诉我们context能⼲什么，也就是说，如果我们不想通过props实现组件树的逐层传递
数据，则可以使⽤context实现跨层级进⾏数据传递！

屏幕截图 2020-10-09 155912.png

创建Context,

ContextData.jsx ,通过 Provider 进行数据传递

import React, { Component } from 'react'
// 创建 Context 并导出
export const Context = React.createContext()
export class ContextData extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [
        {
          name: '小明',
          age: 18,
          sex: '男',
        },
        {
          name: '小红',
          age: 16,
          sex: '女',
        },
        {
          name: '小王',
          age: 20,
          sex: '男',
        },
      ],
    }
  }
  render() {
    return (
      
        {this.props.children}
      
    )
  }
}

Middle.jsx

import React from 'react'
import Foo from './Foo'
import Bar from './Bar'

function Middle() {
  return (
    

      
      
    
  )
}

export default Middle

Foo.jsx, 类组件

方式一: 通过 Consumer 里面{放一个函数} 来获得 Context 的数据

import React, { Component } from 'react'
import {Context} from './ContextData'

export class Foo extends Component {
  render() {
    return (
      
        {appContext=>
Foo：{JSON.stringify(appContext.users[0])}
}
      
    )
  }
}

export default Foo

Bar.jsx 函数式组件

方式二: 通过 useContext 传入创建的 Context

import React from 'react'
import {Context} from './ContextData'
function Bar() {
  const appContext = React.useContext(Context)
  return (
    

      
Bar: {JSON.stringify(appContext.users[1])}
    
  )
}

export default Bar

Baz.jsx 类组件

方式三: 通过静态属性
static contextType = Context,
const appContext = this.context;

import React, { Component } from 'react'
import {Context} from './ContextData'
export default class Baz extends Component {
  static contextType = Context
  render() {
    const appContext = this.context;
    return (
      

        {/* 
这是一个懒加载...
 */}
        Baz: {JSON.stringify(appContext.users[2])}
      
    )
  }
}

浏览器显示结果

屏幕截图 2020-10-09 160646.png