浅谈react hook （useContext()）

import React ,{createContext,useContext} from "react";

import ReactDOM from "react-dom";

import "./index.css";

// 　useContext()的出现，方便了我们在组件之间的状态共享。

//  不需要多层porps传参 

 

// 第一步创建 createContext

const AppContext = createContext()

 

//组件使用useContext

const Children=()=>  {

    const user = useContext(AppContext)

    return (

      <div>{ user.name}</div>

    )

}

const Navbar = () => {

      const { name } = useContext(AppContext)

       return (

        <div className="navbar">

          <p>{name}</p>

        </div>

  )

    }

function App () {

   

  return (

    <div>

      <AppContext.Provider value={{name:'武大郎',age:48,}}>

      <Children ></Children>

      <Navbar></Navbar>

      </AppContext.Provider>

    </div>

    )

}

ReactDOM.render(<App />, document.getElementById("root"));