react-useContext 使用

useContext 是什么？

useContext 是 React 的一个 Hook，它允许你在组件树中跨多层级访问 context 的值，而无需通过每层手动传递 props。

使用场景

在开发中有时候会遇到比较深层的父子孙传参，常规做法是用props一层层传递下去，在子组件中接收，再继续传递，这样做在一两层的时候逻辑还算清晰，但是一旦超过三层，代码就变得丑陋起来，一旦更改就要逐层排查，难以维护，这时候用上useContext会使代码变得简洁易懂。

用法：

1.全局变量初始化

在组件的最顶层，创建文件夹context.tsx

使用 createContext 创建一个 Context

import React from "react";
const MyContext = React.createContext({
  data: {
    name:'默认值'
  },
  setData: () => {}, //函数
});

export default MyContext;

2.在顶级组件中使用

Provider 包裹住它的子组件，以提供 context 的当前值给这些子组件

import MyContext from "./context";
...
    <MyContext.Provider
        value={{
          data: formData,//某个要传递的值
          setData: () =>{console.log("调用了setData函数")},
        }}
      >
        {*子组件*}
  </MyContext.Provider>

...

3.子组件中使用

在子组件中引入context文件，使用 useContext Hook 来读取 context 的当前值。

import MyContext from "../../context";
const contextValue = useContext(MyContext); //拿到传递地信息，此处为父组件中传的value

contextValue.setData();//打印：调用了setData函数
console.log(contextValue.data)//实时更新的父组件的数据，可以用函数去更改