useContext的入门使用

useContext 是一个 React Hook，可以让你读取和订阅组件中的 context。

const value = useContext(SomeContext)

• SomeContext：先前用 createContext 创建的 context。context 本身不包含信息，它只代表你可以提供或从组件中读取的信息类型。
• useContext 为调用组件返回 context 的值。它被确定为传递给树中调用组件上方最近的 SomeContext.Provider 的 value。如果没有这样的 provider，那么返回值将会是为创建该 context 传递给 createContext 的 defaultValue。返回的值始终是最新的。如果 context 发生变化，React 会自动重新渲染读取 context 的组件。

下面使用一个简单的例子说明一下，

1.index.tsx文件

首选需要使用createContext来创建

使用<创建的context.Provider> 包裹组件内容，value就是要传递过去的数据

import React from 'react';

const defaultContextValue = {
  username: "小明"
}

创建context，并且导出，以便于其他组件使用
export const appContext = React.createContext(defaultContextValue)

root.render(
  <React.StrictMode>
//使用appContext.Provider 包裹组件内容，value就是要传递的数据
    <appContext.Provider value={defaultContextValue}>
     <App />
    </appContext.Provider>
  </React.StrictMode>
);

2.子组件文件，robot.jsx

写法一：

用<appContext.Consumer>包裹组件内容，使用value来接收传递过来的数据

import React from "react"

// 创建函数式组件
const Robot: React.FC<RobotProps> = ({id, name, email, username}) => {
  return (
//方法一：使用appContext.Consumer包裹组件内容，value就是传递过来的数据
    <appContext.Consumer>
      {(value)=> {
        return (
          <div className= {styles.cardContainer}>
            <img src={`https://robohash.org/${id}`} alt="robot"/>
            <h2>name: {name}</h2>
            <h3>username: { username }</h3>
            <p>email: {email}</p>
            <p>作者：{ value.username }</p>
          </div>
        )
      }}
    </appContext.Consumer>
  )
}

export default Robot

方法二：

使用useContext接收传递过来的数据，

useContext 返回你向 context 传递的 context value。为了确定 context 值，React 搜索组件树，为这个特定的 context 向上查找最近的 context provider。

import React, { useContext } from "react"

// 创建函数式组件
const Robot: React.FC<RobotProps> = ({id, name, email, username}) => {

//调用 useContext 来读取和订阅 context
  const value = useContext(appContext)

  return (
    <div className= {styles.cardContainer}>
      <img src={`https://robohash.org/${id}`} alt="robot"/>
      <h2>name: {name}</h2>
      <h3>username: { username }</h3>
      <p>email: {email}</p>
      <p>作者：{ value.username }</p>
    </div>
  )
}

export default Robot