ReactHooks专题-contextHook

Context Hook

在之前的开发中，我们要在组件中使用共享的Context有两种方式；

• 类式组件可以通过类型.contextType = MyContext的方式，在类中获取context；
• 多个Context或者在函数式组件中通过MyContext.Consumer方式共享context；

但是多个Context共享的时候会存在大量的嵌套；

• Context Hook允许我们通过Hook来直接获取某个Context的值；

const value=useContext(MyContext)

创建publishContext/index.js

import React,{createContext} from "react"
let Theme=createContext({theme:'红色'})
let Info=createContext({name:'张三',age:18})
export {
  Theme,Info
}

在App.js中使用Context赋值

import React from 'react'
import CreateContextCom from "./pages/createContextCom.jsx";
import {Theme,Info} from './publishContext/index.js'
function App(props) {
  return (
    <div>
      <h1>react-router的使用</h1>
      <Theme.Provider value={{theme:'中国红'}}>
        <Info.Provider value={{name:'李四',age:28}}>
          <CreateContextCom/>
        </Info.Provider>
      </Theme.Provider>
    </div>
  );
}
export default App;

创建createContextCom.jsx组件

import React, { useContext } from 'react';
import {Theme,Info} from '../publishContext/index.js'
export default function CreateContextCom() {
  let theme=useContext(Theme)
  let info=useContext(Info)
  return <div>
    <h2>createContextCom</h2>
    <p>{theme.theme}</p>
    <p>{info.name}-{info.age}</p>
  </div>;
}

注意事项：当组件上层最近挂在的value的值更新时，该Hook会触发重新渲染，并使用最新传递给的使用者的值；