react中的context是什么呢

Context 通過組件樹提供了?個傳遞數(shù)據(jù)的?法，從?避免了在每?個層級?動的傳遞 props 屬性。
?檔也沒具體給出context到底是什么，?是告訴我們context能?什么，也就是說，如果我們不想通過props實現(xiàn)組件樹的逐層傳遞
數(shù)據(jù)，則可以使?context實現(xiàn)跨層級進?數(shù)據(jù)傳遞！

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

創(chuàng)建Context,

ContextData.jsx ,通過 Provider 進行數(shù)據(jù)傳遞

import React, { Component } from 'react'
// 創(chuàng)建 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 (
      <Context.Provider value={this.state}>
        {this.props.children}
      </Context.Provider>
    )
  }
}

Middle.jsx

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

function Middle() {
  return (
    <div>
      <Foo></Foo>
      <Bar></Bar>
    </div>
  )
}

export default Middle

Foo.jsx, 類組件

方式一: 通過 Consumer 里面{放一個函數(shù)} 來獲得 Context 的數(shù)據(jù)

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

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

export default Foo

Bar.jsx 函數(shù)式組件

方式二: 通過 useContext 傳入創(chuàng)建的 Context

import React from 'react'
import {Context} from './ContextData'
function Bar() {
  const appContext = React.useContext(Context)
  return (
    <div>
      <p>Bar: {JSON.stringify(appContext.users[1])}</p>
    </div>
  )
}

export default Bar

Baz.jsx 類組件

方式三: 通過靜態(tài)屬性
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 (
      <div>
        {/* <p>這是一個懶加載...</p> */}
        Baz: {JSON.stringify(appContext.users[2])}
      </div>
    )
  }
}

瀏覽器顯示結(jié)果

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