React的Hooks3——上下文useContext

React的Hooks3——上下文useContext

1. 上下文

• 全局变量是全局的上下文
• 上下文是局部的全局变量（Provider包着的地方可以访问）

2. 使用方法

• 使用C = createContext(intial)创建上下文 使<C.Provider>圈定作用域
• 在作用域内使用useContext©来使用上下文

代码示例：

const Context = createContext(null)
function App(){
  const [n,setN] = useState(0)
  return (
    <Context.Provider value={{n,setN}}>
      <div className="App">
        <h1>hello</h1>
        <BaBa />
      </div>
    </Context.Provider>
  )
}


function BaBa(){
  return (
    <div>我是爸爸<Child /></div>
  )
}
function Child(){
  const {n,setN} = useContext(Context)
  const onClick = () => {
    setN(n=>n+1)
  }
  return (
  <div>我是儿子,我得到的n:{n}
    <button onClick={onClick}>+1</button>
  </div>
  )
}