45.React学习笔记.hooks useContext

在之前的demo中，笔者在组件中使用共享的Context有两种方式：

1. 类组件可以通过，类名.contextType = MyContext方式，在类中获取context；
2. 多个Context或者在函数式组件中通过MyContext.Consumer方式共享context；
   但是多个Context共享时，会有大量的嵌套存在：

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

一. useContext使用

import React, { useContext } from 'react'
import { UserContext, ThemeContext } from "../App";
export default function ContextHookDemo() {
  const user = useContext(UserContext);
  const theme = useContext(ThemeContext);
  console.log(user, theme);
  return (
    <div>
      <h2>ContextHookDemo</h2>
    </div>
  )
}

      // App.js
      <UserContext.Provider value={{ name: "why", age: 18 }}>
        <ThemeContext.Provider value={{ fontSize: "30px", color: "red" }}>
          <ContextHookDemo />
        </ThemeContext.Provider>
      </UserContext.Provider>

总而言之，useContext就是替换了context中的Consumer。