Reacthooks之useContext《类比Vue的Provide》（三）

提示&＃xff1a;我又来更新啦&＃xff01;&＃xff01;&＃xff01;这次又把之前useEffect的补充了一次&＃xff01;&＃xff01;&＃xff01;&＃xff01;

1.Vue中的Provide和useContext&＃xff08;相同点&＃xff09;

1.主要都是为了解决传值问题出现的

2.主要用于 &＃x1f474;&＃61;&＃61;》 &＃x1f468; &＃61;&＃61;》孩子组件的传值问题&＃xff0c;解决开发者从爷爷到孩子组件的 两次props的复杂传值问题

2…Vue中的Provide和useContext&＃xff08;不同点&＃xff09;

1.使用的方法不同&＃xff08;vue中的更加简单&＃xff09;

2.使用的方式不同&＃xff08;useContext相当于是爷爷组件的所有子组件都可以访问到传下来的数据。&＃xff09;

第一步&＃xff1a;创建传值的组件结构&＃xff08;爷爷&＃xff0c;父亲&＃xff0c;孩子组件&＃xff09;

1.说明如下&＃xff1a;

这里主要是 爷爷组件导入了 父亲组件。父亲组件导入了 孩子组件 所以就形成了一个三级嵌套的关系。 我们这时候 爷爷传给父就可以用props传值&＃xff0c;传给孩子可以使用context进行传值

2.结构如下图&＃xff1a;

第二步&＃xff1a;创建Context&＃xff08;一定要导出&＃xff09;

代码如下

export const MyContext &＃61; React.createContext(&＃39;link&＃39;)


第三步&＃xff1a;书写传值姿势

//这里的Value就是传给下面的值
<MyContext.Provider value&＃61;{buttonType as any}>
<FatherComponent></FatherComponent>
</MyContext.Provider>


第四步&＃xff1a;导入useContext&＃xff08;一定是函数组件&＃xff09;

如果这里传的组件不是【函数组件】就不要使用 useContext去接受&＃xff0c;
可以考虑使用consumer 或者 staic contype去接受 或者直接把类组件中的contype进行更改

child组件代码如下

import React, { useContext } from "react";
import &＃39;./index&＃39;
import { MyContext } from "../../../../App";
import { Button } from "antd";
export default function Child(props:any){
const type &＃61; useContext(MyContext) as any;
console.log(type);
return <div>
<Button type&＃61;{type.type}>child按钮</Button>
</div>
}


说明如下图

第五步&＃xff1a;查看传值结果

默认Text按钮

修改成Primary类型按钮

1.修改索引&＃xff08;代码如下&＃xff09;

//修改了下面的这个Value值&＃xff08;改成了数组&＃xff09;。 //索引1是对应的一个类型&＃xff0c;索引2表示的是修改当前type的方法


<MyContext.Provider value&＃61;{[buttonType,setButtonType] as any}>
<FatherComponent></FatherComponent>
</MyContext.Provider>


2.在child中添加一行代码&＃xff0c;调用传下去的函数&＃xff08;一定要传修改的参数&＃xff01;&＃xff09;

type[1]({ type: &＃39;text&＃39; })

总结&＃xff1a;⚠️重点注意&＃xff08;我踩的坑&＃xff09;

提示&＃xff1a;这里对文章进行总结&＃xff1a;

问题一&＃xff1a;为什么第一次渲染的时候不是link类型&＃xff0c;而是text类型

只有当组件所处的树中没有匹配到 Provider 时&＃xff0c;其 defaultValue 参数才会生效 此默认值有助于在不使用 Provider 包装组件的情况下对组件进行测试。注意&＃xff1a;将 undefined 传递给 Provider 的 value 时&＃xff0c;消费组件的 defaultValue 不会生效。

问题二&＃xff1a;父亲组件可以拿到数据吗

通过相同的使用方式&＃xff0c;父组件也是可以拿到context向下传递的数据。已经测试过了&＃xff01;&＃xff01;&＃xff01;&＃xff01;&＃xff01;

问题三&＃xff1a;class组件怎么拿数据&＃xff08;点击&＃x1f447;&＃x1f517;&＃xff09;

React中的 context 在class组件中如何接收传递数据