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)//实时更新的父组件的数据,可以用函数去更改