useContext的应用场景

前言

useContext的应用场景

一、React中的Context解决了什么问题？

1. 传统方式：React的ContextAPI主要解决了在组件树中跨层级传递props（属性）的问题。在传统的React应用中，当需要在多个层级嵌套的组件之间共享数据时，通常的做法是通过props一层层地向下传递，这种方式在组件结构复杂时，会导致代码难以维护和理解，即所谓的“propdrilling”（属性穿透）问题。
2. 使用Context: Context提供了一种在组件树中传递数据的方式，而不必手动地在每个层级上通过props传递。这样可以让组件树更加简洁，也更容易理解和维护。Context API允许你定义一个上下文（Context），它可以在组件树中被多个组件共享，而不需要显式地通过组件树手动传递props。

二、使用步骤

1. 创建Context

首先，你需要使用createContext方法创建一个Context对象。这个对象包含Provider。
这里单独搞一个文件是各个组件都需要使用,所以搞成公共的。
代码如下（示例）：

import { createContext } from "react";
// 创建一个上下文
const myContext = createContext(null);

export default myContext;

2.myContext.Provider进行注册

myContext.Provider进行注册传值
代码如下（示例）：

// 引入myContext （我们刚创的context文件）
import myContext from "./Context";

//引入子组件Son
import Son from "./pages/Son";

// 父组件App
function App() {
  const name = "我是被传过去的值";
  return (
    <>
    // myContext.Provider进行注册  （传值到Son组件）
      <myContext.Provider value={name}>
        <Son />
      </myContext.Provider>
    </>
  );
}

export default App;

3.在组件中使用Context值

使用useContext 这个钩子来获取传过来的值。

import { useContext } from "react";
import myContext from "../Context";
const Son = () => {
  const name = useContext(myContext);
  console.log(name);

  return <div>son</div>;
};

export default Son;

完成：

总结

以上就是今天要讲的内容，本文仅仅简单介绍了useContext的使用。