import React, { Component, useState, createContext, useContext } from 'react'
const countContext = createContext()//创建Context实例对象
// 基础写法
class Foo extends Component {
render() {
return (
<countContext.Consumer>
{
count => <h1>{count}</h1>
}
</countContext.Consumer>
)
}
}
//contextType写法
class Bar extends Component {
static contextType = countContext //contextType是静态的
render() {
const count = this.context
return (
<h1>{count}</h1>
)
}
}
//useContext写法
function Counter() {
const count = useContext(countContext)
//调用useContext获取count,参数就是Context实例对象countContext
//在函数组件中,可以获取成千上万噶Context
return (
<h1>{count}</h1>
)
}
function APP(props) {
const [count, setCount] = useState(0)
return (
<div>
<button
type="button"
onClick={() => { setCount(count + 1) }}
>
Click({count})
</button>
<countContext.Provider value={count}>
<Foo />
<Bar />
<Counter />
</countContext.Provider>
</div>
)
}
export default APP