react hook使用context

在React中，使用上下文（context）可以方便地在组件之间共享数据。通过使用React的Hooks中的useContext钩子，我们可以更简单地使用上下文。

首先，我们需要创建一个上下文对象，可以使用React的createContext函数来创建。这个上下文对象可以包含我们想要共享的任何类型的数据。

然后，在函数组件中使用useContext钩子来读取上下文的值。使用useContext时，我们需要将上下文对象作为参数传递给它，它将返回上下文的当前值。

需要注意的是，尽管可以使用useContext读取上下文的值，但我们仍然需要在上层组件树中使用<MyContext.Provider>来为下层组件提供上下文。这个<MyContext.Provider>组件接收一个value属性，用于传递上下文的值给子组件。

下面是一个使用原始写法和使用context hook写法的例子：

原始写法：

import React from 'react';

// 创建一个上下文，初始化值
const MyContext = React.createContext({name: 'twinkle', age: 18});

// 文本组件
function TextComp() {
  return (
    <>
      <MyContext.Consumer>
        {value => (
          <>
            <p>名字：{value.name}</p>
            <p>年龄：{value.age}</p>
          </>
        )}
      </MyContext.Consumer>
    </>
  );
}

// 测试组件
export default function TestContextComp() {
  return (
    <div>
      <MyContext.Provider value={{name: 'cll', age: 18}}>
        <TextComp/>
      </MyContext.Provider>
    </div>
  );
}

使用context hook写法：

import React, { useContext } from 'react';

// 上下文数据的结构
interface ICtxP {
  name: string;
  age: number;
}

// 创建一个上下文
const MyContext = React.createContext<ICtxP>({ name: 'twinkle', age: 18 });

// 文本组件
function TextComp() {
  const value = useContext(MyContext); // 使用上下文hook
  return (
    <>
      <p>名字： {value.name}</p>
      <p>年龄： {value.age}</p>
    </>
  );
}

export default function TextContextHook() {
  return (
    <div>
      <MyContext.Provider value={{ name: 'cll', age: 18 }}>
        <TextComp/>
      </MyContext.Provider>
    </div>
  );
}

无论是原始写法还是使用context hook写法，它们都可以实现在React中使用上下文来共享数据。使用context hook写法可以减少代码量并简化组件的结构，使其更加简洁和易于理解。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [react 进阶hook 之 context Hook](https://blog.csdn.net/qq_41499782/article/details/115493691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]