设计师服务平台鱼巴士有哪些网站,网站开发使用软件环境,绿色资源网,58同城遵义文章概叙
本文主要是写React中Context的概念以及使用#xff0c;请一定搞清楚什么时候使用Context
Context的介绍 通常来说#xff0c;你会通过 props 将信息从父组件传递到子组件。但是#xff0c;如果你必须通过许多中间组件向下传递 props#xff0c;或是在你应用中的…文章概叙
本文主要是写React中Context的概念以及使用请一定搞清楚什么时候使用Context
Context的介绍 通常来说你会通过 props 将信息从父组件传递到子组件。但是如果你必须通过许多中间组件向下传递 props或是在你应用中的许多组件需要相同的信息传递 props 会变得十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息而无需通过 props 显式传递。 顾名思义Context的意思是上下文在以组件为主的React中Context的作用就如同props一样将属性传递过去只是Context的范围更广阔可以实现根节点对下属多个子节点的属性传递当然如果想要实现全局的属性传递Redux无疑是更适合的。 上下文使得组件能够无需通过显式传递参数的方式 将信息逐层传递。 Context 可以让父节点甚至是很远的父节点都可以为其内部的整个组件树提供数据。 上图是官网拿过来的很完美地解释了Context的辐射区域。
了解了Context的作用范围接下来会创建一个如上图所述的结构来阐述Context的使用方法。
创建Context
既然要讨论Context第一步势必要创建一个Context但是需要确定好Context的对象也就是我们的Context的“根”要放在哪儿。一般来说是放在我们需要读取属性的根节点这次的Demo会放在名为Pcomponent的组件下。
创建context我们需要使用到createContext来创建一个Context,而这个API需要传递一个默认参数下面会传入如下的对象。
{name: mk,emial: mkxxx.com,department: IT
}需要注意的是我们需要将createContext返回的参数导出去别的地方会用到。
import React, { createContext } from react;
import Scomponent from ../Scomponent;
function Pcomponent() {return (Scomponent/Scomponent/);
}
export default Pcomponent;
export const userContext createContext({name: mk,email: mkxxx.com,department: IT,
});使用Context
无意外既然有抛出那就有接收以及使用使用Context需要用到一个名为useContext的hook且需要在当前的组件中引入我们刚刚创建的context。
import { useContext } from react;
import { userContext } from ./../Pcomponent;
function Scomponent() {const user useContext(userContext);return (pname:{user?.name}/ppemail:{user?.email}/ppdepartment:{user?.department}/p/);
}
export default Scomponent;当前效果如下 看起来我们的效果实现了可以在a组件读取到b组件的数据而且还不限制于是否为根组件的关系。
但是请注意我们当前的效果并没有什么用因为我们用一个export跟import也可以实现这么一个“初始化”的跨组件读取效果而且这个是一个永远不会变的初始化效果
上下文之所以有用是因为可以 提供来自其他组件的其他的、动态变化的值
Provider包裹组件
用上下文 provider 包裹组件为里面所有的组件指定一个上下文的值 我们需要使用Provider,在Pcomponent中将Scomponent包裹起来为其指定一个上下文且在下面的代码中会使用到useState这个Hook作用是方便进行数据的更新。
import React, { createContext, useState } from react;
import Scomponent from ../Scomponent;
const initData {name: mk,email: mkxxx.com,department: IT,
};
function Pcomponent() {const [userInfo, setUserInfo] useState(initData);return (userContext.Provider value{{ userInfo, setUserInfo }}Scomponent/Scomponent/userContext.Provider);
}
export default Pcomponent;
export const userContext createContextany(initData);上述的代码中第三行到第七行我们将初始化的状态抽离出来封装成一个初始化的数据。在第17行中设置了context的初始化数据。
最重要的代码在于第11行中使用provider作为context的载体这告诉了React当你在下面设置了读取上下文的时候请使用这儿设置的userContext.且value属性为传递值并且设置了更新的方法以便在其他组件中可以更新根组件中的属性。 接着在子组件中我们也需要对我们的代码做一些小小的更新。
import { useContext } from react;
import { userContext } from ./../Pcomponent;
function Scomponent() {const user useContext(userContext);return (pname:{user?.userInfo?.name}/ppemail:{user?.userInfo?.email}/ppdepartment:{user?.userInfo?.department}/pbuttononClick{() {user.setUserInfo({...user.userInfo,name: user?.userInfo?.name 1,});}}更新数据/button/);
}
export default Scomponent;其中由于使用Provider传进来的参数已经变成了两种其中一个为数据一个为更新数据的方法所以在页面中也需要进行更改。
效果如下 现在对于Context的使用到此结束了你对context的使用程度应该到了可以上手的地步了。
当涉及到多个context的使用我更建议使用redux或者是useReducer如果单纯的使用多个Context的话,代码结构上很乱。 接着会增加一个P2component组件测试Context的范围。
为了方便测试下面的代码会直接放在app.tsx中。
import React from react;
import ./App.css;
import Pcomponent from ./components/Pcomponent;
import P2component from ./components/P2component;
function App() {return (div classNameAppPcomponent/PcomponentP2component/P2componenthr//div);
}
export default App;P2component的内容如下,只是简单的引用了Scomponent。
import React from react;
import Scomponent from ../Scomponent;
function P2component({ children }: any) {return Scomponent/Scomponent;
}
export default P2component;可见由于p2component中没有提供provider所以在下面的组件中就没有Context的效果。而出现了useContext无效的感觉.
古老的Consumer
在 useContext 之前有一种更老的方法来读取上下文
function Button() {// 遗留方式 (不推荐)return (ThemeContext.Consumer{theme (button className{theme} /)}/ThemeContext.Consumer);
}怎么看都觉得使用useContext更加简洁、方便…且我记得这个是以前函数组件才用的虽然以前组件基本都用类组件…
最后的叮嘱
与redux相同并不是说一个项目中使用了provider就很高大上在使用provider中需要考虑是否组件结构合理如上述的例子一个props就可以解决了。
在开发中我们也经常使用useReducer跟useContext进行开发但是由于介绍reducer的话篇幅会更长所以就直接用useState来举例子了。
个人博客
公众号文章链接
各位大佬好我又来求关注了希望各位大佬关注下我的公众号冬至快乐~
