在上一篇 对于 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 项目的时候，就对整体项目代码看了一遍，其中就有一个命名为 customer-hooks，打开一看，全都是命名为 usexxx 的 jsx 文件，后面了解到这是大佬们封装的自定义 hook。 于是，今天就自己来总结一下对于 Custom React Hooks 一些思考。 自定义 Hook以下来自 React 官网 关于自定义 Hook 的介绍： 与 React 组件不同的是，自定义 Hook 不需要具有特殊的标识。我们可以自由的决定它的参数是什么，以及它应该返回什么（如果需要的话）。换句话说，它就像一个正常的函数。但是它的名字应该始终以 use 开头，这样可以一眼看出其符合 Hook 的规则。 而对于 Hook 的规则： 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。 只在 React 函数中调用 Hook 自定义 Hook 封装了一些逻辑代码，并能够把数据向下传递到渲染树的操作。 启动一个 react 项目可以通过如下命令快速创建简单 react 应用，详细步骤可以参考官网 ...

阅读须知本文只做转正述职的部分内容总结记录，具体工作内容不会详细去说，在之前 7 月份总结的时候就发现有小伙伴觉得工作太简单了，还有提及答辩我应该怎么怎么去说等等。 有好的建议挺好的，但本文内容与正式转正述职内容还是有些许差距，仅做参考哈。 第一份工作首先，我还是想说我来到 CODING，是比较幸运的。 在选择 CODING 之前，在杭州有一段实习经历，所以 CODING 应该算是我的第一份正式工作。不得不说这也是一场缘分吧，来讲讲与 CODING 的邂逅。 邂逅 CODING在大三阶段我其实就有了解到这个网站，从何了解呢？ 当初大三就折腾过搭建 Hexo 博客，当时代码是放在 GitHub 托管的，网站部署也是使用 GitHub Pages 服务，但访问速度很慢。 后来通过网上的博客教程了解到可以通过托管到 CODING 代码仓库，然后通过静态托管就可以加速访问速度，犹记得当时还是从腾讯云某个入口进入的。 而开始那会为了找静态托管入口也是找了许久，因为教程中就有那个选项，而我打开却没有。后面才知道需要在设置里面开启才能使用。 当时托管我记得还需要支付小额的资金，就是因为这个付费操作 ...

今天在公司做 excel 导入文件的时候发现每次上传都会报这个错误： Uncaught TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob' 现在解决了，用简单的话语总结一下： 因为 antd 会对原生文件上传包装一下： 拿这个属性值就好了： originFileObj 最后解决了问题，完美。

大家好呀，今天又到了月末了，周二又到了校招入职月度成长汇报的时间了，本次还是继续在这里进行一个大纲编写。 8 月月度成长汇报由于部分内容涉及公司信息，所以就不做详细说明了，以下内容仅个人工作期间个人收获与总结，仅供参考。 上月与本月的对比回顾 上个月的总结，做的事情看起来比较简单，写静态页面相对来说会多一点，实际上涉及到的业务场景很少，一般就是与设计师与产品对接实现页面。 但本月就不同了，更多的就是深入业务场景了，首先是接手到了我们运营这边内部使用的管理系统，以 React 技术栈为主。 首先是看了一下整体的界面，属于简约的风格，起初觉得界面实现起来应该会简单一点。 刚开始，为了熟悉整体的项目结构以及相关业务，做的需求都是一些小功能，比如修改客户档案的到期时间、在某个列表下增加分页组件等等，在边实现这些功能的同时，我熟悉了整体的项目结构，这对我后续单独做一个功能模块提供了帮助。 遇到的问题涉及到业务场景了，自然会遇到一些问题，下面我来整理一下： 管理系统首先是管理系统相关的，刚开始实现某个小功能的时候，比如要增加某个列表下的分页组件，当时看到这个弹框页面说不定之后还会有类似的需要分页 ...

往期文章目录： 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 篇相见，我们进入正文吧！ 子组件获取数据有了 上一篇 传递数据给了子组件， ...

往期文章目录： 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 ...

往期文章目录： 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 构建的项目的目录结构，对每一个文件进行了解释说明，那么本 ...

往期文章目录： 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 就是： 用于构建用户界面的 ...

往期文章目录： React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」 快速搭建项目在上一篇 React 17 + Vite + ECharts 实现疫情数据可视化「01 项目介绍篇」 我们进行了项目的介绍，非常高兴能与大家在第二篇相见，本篇我们将教大家如何快速搭建项目，思维导图如下，给本文「点赞+评论+关注」三连，支持一下博主哈。 介绍 Vite在介绍之前，给大家先放上 Vite 官方中文文档，以官网最新为准哈。 https://cn.vitejs.dev/ 尤大还是比较敬佩的，在这里放上他在知乎的一个回答： 在官方文档中，标题的一句介绍：「下一代前端开发与构建工具」，还有尤大也提及了，使用 Vite 的用户会越来越多。 现在工作就正在使用 Vite，就是我工作中的导师搭建的，之前使用 webpack，由于项目越来越复杂，页面逐渐变多了，每次启动项目构建了许久，其次是更新时的打包时间也变久了，这样对于编程体验来说就不是很好了。 于是乎，通过一周的工作之余学习，接入了 Vite，然后对我说：别学 webpack 了，赶紧来用 Vite，当 ...