react学习—Context Hook

一、Context Hook

按之前学习的知识，我们使用上下文的话

import React from 'react'

const ctx = React.createContext()
function Test() {
  return <ctx.Consumer>
      {value => <h1>Test上下文：{value}</h1>}
  </ctx.Consumer>
}
export default function App() {
  return (
    <div>
      <ctx.Provider value="abc">
          <Test />
      </ctx.Provider>
    </div>
  )
}

但是这样不可避免的造成了多次嵌套，使得页面结构不够纯粹

import React,{useContext} from 'react'

const ctx = React.createContext()
// function Test() {
//   return <ctx.Consumer>
//       {value => <h1>Test上下文：{value}</h1>}
//   </ctx.Consumer>
// }
function Test(){
    const value = useContext(ctx);
    return <h1>Test上下文：{value}</h1>
}
export default function App() {
  return (
    <div>
      <ctx.Provider value="abc">
          <Test />
      </ctx.Provider>
    </div>
  )
}

react致力于组件结构的纯净与简单

博主开始运营自己的公众号啦，感兴趣的可以关注“飞羽逐星”微信公众号哦，拿起手机就能阅读感兴趣的博客啦！