【React 系列 02】❤️ Custom Hooks 中使用 React Context
在上一篇 对于 Custom React Hooks 一些思考 文章末尾提及了 React Context,那么在本篇中我们将了解一下 React Context 怎么解决状态共享问题以及一些其它想法。
关于 React Context提供 官网对于 usecontext 的介绍
const value = useContext(MyContext);
无论组件在组件树中的深度如何,React Context 都为组件提供数据。 上下文用于管理全局数据,例如 全局状态、主题、服务、用户设置等。
那么我们回到上篇文章提及到的例子吧,如何在父子组件中共享 useBoolean 返回的状态呢?
怎样使用 Context在给出一份解决方案前,先来说明一下如何使用 Context。步骤也是比较简单:
creating the context
providing the context
consuming the context
creating the context
首先在 src 目录下创建一个名为 context 的文件夹,创建 index.tsx 文件通过 createCon ...
【React 系列 01】❤️ 在工作中对于 Custom React Hooks 一些思考
当我刚接手 React 项目的时候,就对整体项目代码看了一遍,其中就有一个命名为 customer-hooks,打开一看,全都是命名为 usexxx 的 jsx 文件,后面了解到这是大佬们封装的自定义 hook。
于是,今天就自己来总结一下对于 Custom React Hooks 一些思考。
自定义 Hook以下来自 React 官网 关于自定义 Hook 的介绍:
与 React 组件不同的是,自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么,以及它应该返回什么(如果需要的话)。换句话说,它就像一个正常的函数。但是它的名字应该始终以 use 开头,这样可以一眼看出其符合 Hook 的规则。
而对于 Hook 的规则:
不要在循环,条件或嵌套函数中调用 Hook, 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。
只在 React 函数中调用 Hook
自定义 Hook 封装了一些逻辑代码,并能够把数据向下传递到渲染树的操作。
启动一个 react 项目可以通过如下命令快速创建简单 react 应用,详细步骤可以参考官网 ...
试用期 3 个月的总结,转正述职 | 21 届前端校招分享
阅读须知本文只做转正述职的部分内容总结记录,具体工作内容不会详细去说,在之前 7 月份总结的时候就发现有小伙伴觉得工作太简单了,还有提及答辩我应该怎么怎么去说等等。
有好的建议挺好的,但本文内容与正式转正述职内容还是有些许差距,仅做参考哈。
第一份工作首先,我还是想说我来到 CODING,是比较幸运的。
在选择 CODING 之前,在杭州有一段实习经历,所以 CODING 应该算是我的第一份正式工作。不得不说这也是一场缘分吧,来讲讲与 CODING 的邂逅。
邂逅 CODING在大三阶段我其实就有了解到这个网站,从何了解呢?
当初大三就折腾过搭建 Hexo 博客,当时代码是放在 GitHub 托管的,网站部署也是使用 GitHub Pages 服务,但访问速度很慢。
后来通过网上的博客教程了解到可以通过托管到 CODING 代码仓库,然后通过静态托管就可以加速访问速度,犹记得当时还是从腾讯云某个入口进入的。
而开始那会为了找静态托管入口也是找了许久,因为教程中就有那个选项,而我打开却没有。后面才知道需要在设置里面开启才能使用。
当时托管我记得还需要支付小额的资金,就是因为这个付费操作 ...
【已解决】在react+ts中 atnd 用 upload 组件报错Failed to execute ‘readAsArrayBuffer,param 1 is notof type Blob
今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误:
Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'
现在解决了,用简单的话语总结一下:
因为 antd 会对原生文件上传包装一下:
拿这个属性值就好了:
originFileObj
最后解决了问题,完美。
21 届校招 8 月前端月度工作汇报 |总结
大家好呀,今天又到了月末了,周二又到了校招入职月度成长汇报的时间了,本次还是继续在这里进行一个大纲编写。
8 月月度成长汇报由于部分内容涉及公司信息,所以就不做详细说明了,以下内容仅个人工作期间个人收获与总结,仅供参考。
上月与本月的对比回顾 上个月的总结,做的事情看起来比较简单,写静态页面相对来说会多一点,实际上涉及到的业务场景很少,一般就是与设计师与产品对接实现页面。
但本月就不同了,更多的就是深入业务场景了,首先是接手到了我们运营这边内部使用的管理系统,以 React 技术栈为主。
首先是看了一下整体的界面,属于简约的风格,起初觉得界面实现起来应该会简单一点。
刚开始,为了熟悉整体的项目结构以及相关业务,做的需求都是一些小功能,比如修改客户档案的到期时间、在某个列表下增加分页组件等等,在边实现这些功能的同时,我熟悉了整体的项目结构,这对我后续单独做一个功能模块提供了帮助。
遇到的问题涉及到业务场景了,自然会遇到一些问题,下面我来整理一下:
管理系统首先是管理系统相关的,刚开始实现某个小功能的时候,比如要增加某个列表下的分页组件,当时看到这个弹框页面说不定之后还会有类似的需要分页 ...
「06 完成疫情地图绘制」React 17 + Vite + ECharts 实现疫情数据可视化
往期文章目录:
React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」
React 17 + Vite + ECharts 实现疫情数据可视化「05 获取疫情数据」
完成疫情地图绘制在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「05 获取疫情数据」中我们获取到了最重要的疫情数据并对其结构进行了处理。
那么,本篇我们来介绍用于绘制地图的 Echarts 以及 echarts-for-react,在下一篇我们将进行地图的绘制,也将是系列文章的最终篇了,也代表着本项目基本版本就快要结束了,后续会推出 Pro 版本,尽情期待吧。
非常高兴能与大家在第 6 篇相见,我们进入正文吧!
子组件获取数据有了 上一篇 传递数据给了子组件, ...
「05 获取疫情数据」React 17 + Vite + ECharts 实现疫情数据可视化
往期文章目录:
React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」
获取疫情数据在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「04 初始化项目」 中我们对项目进行了初始化操作,对目录结构进行了更新,然后安装了本次项目所依赖的包,最后实现了一个比较简单的页面。
那么,本篇开始要往实际代码编写了,首先第一步就是获取疫情的数据并进行处理。
非常高兴能与大家在第 5 篇相见,我们进入正文吧!
接口来源这个接口并非本人编写,同样是为了节省一些成本,前端只做页面渲染,真正的数据由后端返回(假设这个接口就是后端同学给我们写好的)。
url: "https://vyps.api.storeapi.net/api/94/2 ...
「04 初始化项目」React 17 + Vite + ECharts 实现疫情数据可视化
往期文章目录:
React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」
初始化项目在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「03 学习 React Hooks」 中我们介绍了 React 17 相关 Hooks 用法,其中介绍了两个非常重要又常见的两个 Hook,一个是 useState,另外一个是 useEffect。
那么,本篇我们逐步要往实际代码编写进军了,首先初始化一下我们的项目,更改目录结构,安装项目所依赖的包,最后实现一个简单的页面。
非常高兴能与大家在第 4 篇相见,我们进入正文吧!
更改目录结构在 React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」 这一篇中,给小狮子们介绍了通过 Vite 构建的项目的目录结构,对每一个文件进行了解释说明,那么本 ...
「03 学习 React Hooks」React 17 + Vite + ECharts 实现疫情数据可视化
往期文章目录:
React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」
学习 React Hooks在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「02 快速搭建项目」 中我们进行了项目的快速搭建,非常高兴能与大家在第 3 篇相见,本篇我们将教大家一些基础的 React 语法,由于本项目是 React 17 版本,因此全局写法采用 React Hooks。
本篇将给大家介绍两个非常重要又常见的两个 Hook,一个是 useState,另外一个是 useEffect,其它的 Hook 暂时不介绍哈,目前的项目版本还不是很需要。思维导图如下,给本文「点赞+评论+关注」三连,支持一下博主哈。
介绍 React老规矩,先放上 React 官方中文文档 ,以官网最新为准哈,目前我看到的官方版本是 v17.0.2 ,据说 React 18 要来了,快学不动了 。
以官网简单介绍来说,React 就是:
用于构建用户界面的 ...
「02 快速搭建项目」React 17 + Vite + ECharts 实现疫情数据可视化
往期文章目录:
React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」
快速搭建项目在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」 我们进行了项目的介绍,非常高兴能与大家在第二篇相见,本篇我们将教大家如何快速搭建项目,思维导图如下,给本文「点赞+评论+关注」三连,支持一下博主哈。
介绍 Vite在介绍之前,给大家先放上 Vite 官方中文文档,以官网最新为准哈。
https://cn.vitejs.dev/
尤大还是比较敬佩的,在这里放上他在知乎的一个回答:
在官方文档中,标题的一句介绍:「下一代前端开发与构建工具」,还有尤大也提及了,使用 Vite 的用户会越来越多。
现在工作就正在使用 Vite,就是我工作中的导师搭建的,之前使用 webpack,由于项目越来越复杂,页面逐渐变多了,每次启动项目构建了许久,其次是更新时的打包时间也变久了,这样对于编程体验来说就不是很好了。
于是乎,通过一周的工作之余学习,接入了 Vite,然后对我说:别学 webpack 了,赶紧来用 Vite,当 ...