react hooks useContext使用

useContext 基本使用

import React,{ useContext } from 'react'
const people = React.createContext({name:'z',age:'18'})
export default function UseContext() {
    const ctx=useContext(people)
    return (
        <div>
            <div>我是{ctx.name}---今年{ctx.age}岁</div>
        </div>
    )
}

其他写法

import React,{ useContext } from 'react'
// 创建一个 context
const Context = React.createContext(0)

// 组件一, Consumer 写法
class Item1 extends PureComponent {
  render () {
    return (
      <Context.Consumer>
        {
          (count) => (<div>{count}</div>)
        }
      </Context.Consumer>
    )
  }
}
// 组件二, contextType 写法
class Item2 extends PureComponent {
  static contextType = Context
  render () {
    const count = this.context
    return (
      <div>{count}</div>
    )
  }
}
// 组件一, useContext 写法
function Item3 () {
  const count = useContext(Context);
  return (
    <div>{ count }</div>
  )
}

function App () {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      点击次数: { count } 
      <button onClick={() => { setCount(count + 1)}}>点我</button>
      <Context.Provider value={count}>
        <Item1></Item1>
        <Item2></Item2>
        <Item3></Item3>
      </Context.Provider>
    </div>
    )
}

注意：context 中的 Provider 和 Consumer，在类组件和函数组件中都能使用，Consumer多个context嵌套麻烦。contextType只能在类组件中使用，因为它是类的静态属性，多个context无法处理。useContext写法简单，处理多个就写多个useContext。
————————————————
原文链接：https://blog.csdn.net/weixin_43720095/article/details/104949785