react-Context

Context

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法
Middle是父组件,Father,Son,GrandSon 是子组件

import React, { Component, createContext, useContext} from 'react'
import ReactDOM from 'react-dom'

const AppContext = createContext()  // 创建一个 context ,

// app组件 创建 Context 传递参数
const App = () => {
  return (
    <div>
    // 使用一个 Provider 来将当前的 数据 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
      <AppContext.Provider value='zx'>
        <Middle></Middle>
      </AppContext.Provider>
    </div>
  )
}
ReactDOM.render(<App />, document.getElementById('root'))

// father 组件 函数式组件 可以使用useContext
const Father = () => {
  const value = useContext(AppContext) // 使用useContext
  return <div> {value} Father</div>
}
//子组件 类组件 使用 Consumer 回调形式 或者 static 静态方法 接收参数
class Son extends Component {
  render () {
    return (
      <AppContext.Consumer> // 使用Consumer方法
        {value => <div>{value} Son</div>}
      </AppContext.Consumer>
    )
  }
}
//子组件
class GrandSon extends Component {
  static contextType = AppContext  // 类组件 static 静态方法接收
  render () {
    const value = this.context
    return (
      <div>
        <span> {value} GrandSon</span>
      </div>
    )
  }
}
// 中间件
const Middle = () => {
  return (
    <div>
      <Father></Father>
      <Son></Son>
      <GrandSon></GrandSon>
    </div>
  )
}

1. 创建一个 context

2. 使用一个 Provider 来将当前的 数据 传递给以下的组件树 ,无论多深，任何组件都能读取这个值。

3. 组件内部接受方式
   1.类组件 使用 静态方法接受 / 使用useContext方法
   2.使用Consumer方法 ,数据用回调的方式传递

   结果如下: zx是传递的值