zoe_ya
掘金:https://juejin.cn/user/3433090584946360
github: https://github.com/yangzi0210
展开
-
JavaScript 中什么应用场景下必须用 map 而不是对象来实现功能
很多情况下,能用 map 实现的功能用对象也可以实现,都是基于键值对,但是在一些情况下,必须要使用 map 才可以。原创 2024-04-14 19:44:33 · 301 阅读 · 0 评论 -
Button HtmlType 在 React Antd 中的实践不用写 form.resetFieldsValue() 辣
Button组件的 htmlType 属性用于指定按钮的 HTML 表单类型。这个属性可以控制按钮在表单提交时的行为。submit:将按钮作为表单的提交按钮。当用户点击该按钮时,会触发表单的提交操作。reset:将按钮作为表单的重置按钮。当用户点击该按钮时,会将表单中的输入字段重置为初始值。button:将按钮作为普通按钮。这是默认的 htmlType 值,点击该按钮不会触发表单提交或重置操作。原创 2023-06-15 09:36:58 · 481 阅读 · 0 评论 -
Babel 是干什么的
Babel 可以使用插件来扩展其功能,例如,它可以将 TypeScript 代码转换成 JavaScript 代码,或者使用插件来支持新的 ECMAScript 特性。Babel 是一个 JavaScript 编译器,它可以将 ECMAScript 2015+ 版本的代码转换成向后兼容的 JavaScript 代码,以便在现有的浏览器中运行。Babel 的主要作用是将 ECMAScript 2015+ 的代码转换成低版本的 JavaScript 代码。原创 2023-05-30 17:30:46 · 765 阅读 · 0 评论 -
「已解决」 模块““umi“” ““@umijs/max“” 没有导出的成员“useRequest” “request” 问题的所有方法汇总
使用 Umi 搭建项目时候有的时候会出现这种错误,模块““umi”” ““@umijs/max”” 没有导出的成员“useRequest” “request”。原创 2023-07-09 10:20:54 · 4828 阅读 · 3 评论 -
「已解决」React Antd Form.List 表单校验无飘红提示的问题
比如我有这样一段代码来实现对 list 具体内容的校验,但是写完后发现没有提示,打 console.log 发现也能进入到 throw new Error 里面去,但是就是没有飘红提示。我想对 Form.List 构建的表单进行校验,比如下拉框中的内容应当至少有一个 XX,表单的长度不能少于多少等等对 List 内容进行校验,并给出飘红提示。看官网,对 Form.list 整体进行校验需要加上 ErrorList 才能正常显示 飘红提示。原创 2023-07-27 15:56:43 · 1937 阅读 · 0 评论 -
「已解决」umi 路由配置 icon 图标报错问题
(前面三个路由配置也是一开始加图标就报错,但是后面不知道怎么搞的不报错了)当umi的路由配置中带有icon时就会白屏报错。比如这样可以正常渲染。原创 2023-06-09 22:21:45 · 1222 阅读 · 0 评论 -
前端基本功 用 React Hooks + Antd 实现一个 Todo-List
使用 React Hooks 以及组件库 Antd 来实现一个可以。以上步骤所有的完整代码,点开即用。的 todo-list。原创 2023-07-16 08:37:40 · 1691 阅读 · 0 评论 -
如何使用伪元素 ::before 实现 Antd 表单一模一样的 required 红色 * 号
以一个简单的 Form.Item 包裹 Select 为例 我们去实现它的 * 号。F12 打开控制台选中这个元素上面查看 CSS 属性。仿照这个写在 .less 文件里。在 .jsx 文件引入。即可实现一模一样的星号。原创 2023-07-12 09:20:12 · 265 阅读 · 0 评论 -
React 组件防止冒泡方法
在使用 antd 组件库开发时,发现点击一个子组件,却触发了父组件的点击事件,比如,我在一个折叠面板里面放入一个下拉框或者对下拉框列表渲染做定制,每个下拉框候选项都有一个子组件…其实这就是 Javascript 的冒泡机制。原创 2023-08-12 15:36:07 · 1103 阅读 · 0 评论 -
2023年 React 最佳学习路线
目前没有找到比其他文档好很多的文档地址 可以先看官网。新版 React 官方文档无敌。原创 2023-07-27 16:32:27 · 1994 阅读 · 0 评论 -
「JS 基础」JavaScript const 一定不可变? 用 let 实现 const
在 JavaScript 中,使用 const 声明的变量是常量,它的值在声明后就不能被改变了,否则会抛出 TypeError 错误。但是需要注意的是,使用 const 声明的变量并不是不可变的,而是它们的值不可变。在这个例子中,我们使用一个立即执行的匿名函数来创建一个作用域,并在这个作用域内使用let声明了一个变量constantValue。如果 const 变量的值是一个对象或数组,那么该对象或数组的属性和元素是可以被修改的,只要不改变变量本身的值即可。原创 2023-06-29 15:03:00 · 266 阅读 · 0 评论 -
React 新版官方文档 (一) useReducer 用法详解
不要重新执行初始函数 第一种写法会导致每次渲染时候都调用 createInitialState 函数 造成性能浪费。比 useState 多了一个处理函数,该函数可以根据不同的分发状态来对应的改变状态。调用 dispatch 函数不会更改运行代码中的状态 ,使用最新的状态值应该是这样写。注意:state 不可修改 不能这样写, reducer 函数应当返回一个新对象。useReducer 是一个可以让你向组件中添加 reducer 的 Hook。原创 2023-07-10 10:40:37 · 719 阅读 · 0 评论 -
自己动手一步步实现一个简易版 umi 的 useRequest
useRequest 是一个强大的异步数据管理的 Hooks,React 项目中的网络请求场景使用 useRequest 就够了。useRequest 通过插件式组织代码,核心代码极其简单,并且可以很方便的扩展出更高级的功能。自动请求/手动请求轮询防抖节流屏幕聚焦重新请求错误重试SWR(stale-while-revalidate) 缓存具体看官方文档。原创 2023-06-07 13:29:30 · 625 阅读 · 0 评论 -
「已解决」iframe 本地生效 但是在测试环境不生效问题
我有一个表格中一列是个详情,这个详情可被点击,点击后弹出抽屉,抽屉里是后端传给我详情字段的值对应的 url 的 iframe 展示。后端传的网址是以 http 开头,用 replace 方法把 http 换为 https,其他不变即可解决问题。问题是,在本地 localhost 下运行,ifame 运行正常,但是部署到测试环境就看不到 iframe!看起来像是 https 的问题。原创 2023-08-12 15:02:32 · 771 阅读 · 0 评论 -
React 新版官方文档 (二) useState 用法详解
本文默认读者对 useState 有最为基本的了解,比如知道他的写法应当是怎样的,下面着重介绍部分重要的、在开发过程中会踩的坑和一些特性,最后动手实现一个最基本的 useState 代码。使用 setState 并不会改变已执行代码的当前状态 只会影响从下一次渲染开始返回的内容,想获取到变化后的值,可以选用 useEffect。如果提供的新状态与当前状态相同 (使用 Object.is 比较),将跳过重新渲染组件以及子组件。状态只在下次更新时异步变化,如果在设置状态后立即读取值还是老状态的。原创 2023-07-11 22:22:44 · 726 阅读 · 0 评论 -
React useMemo 实际开发使用小结
当你使用 useMemo 时,它会在组件渲染过程中缓存函数的计算结果,并在下一次渲染时,仅在依赖项(dependencies)发生变化时重新计算。在下一次组件渲染时,useMemo 会检查依赖项数组中的每个元素是否与上一次渲染时的对应元素相同。如果依赖项数组中有任何一个元素发生了变化,useMemo 会重新执行计算函数,并更新缓存的结果。如果依赖项数组中的所有元素在下一次渲染时与上一次渲染时的对应元素都相同,则 useMemo 将直接返回上一次缓存的结果,避免不必要的重复计算。原创 2023-07-20 10:53:05 · 272 阅读 · 0 评论 -
2023 年大厂实习前端面试题(一):跨域问题
2023 年大厂实习前端面试题(一):跨域问题原创 2023-05-28 22:46:04 · 261 阅读 · 0 评论 -
「已解决」已有Umi Antd 环境下安装 formily v2 依赖报错问题
想要快速实现漂亮的表单,通常我们都是需要使用业界优秀的组件库的,比如Ant Design 和 Alibaba Fusion,但是这些优秀的组件库,在表单的某些场景上覆盖的还是不够全面,比如详情预览态的支持,Ant Design 是不支持的,还有一些场景化的组件它也是不支持的,所以 Formily 在此之上又封装了@formily/antd 和@formily/next,保证用户开箱即用。使用 Formily 必须要用到@formily/core,它负责管理表单的状态,表单校验,联动等等。原创 2023-06-17 09:40:32 · 1416 阅读 · 0 评论 -
「面试题」JavaScript 手撕大厂面试题数组扁平化以及增加版本集合
现在的前端面试手撕题是一个必要环节,有点时候八股回答的不错但是手撕题没写出来就会让面试官印象分大减,很可能就挂了…原创 2023-08-02 17:02:17 · 559 阅读 · 0 评论 -
「RESTful API」 GET POST 区别 umi 的 request 请求为什么 get 时要用 params,post 时要用 data
umi 的 request 请求为什么 get 时要用 params,post 时要用 data原创 2023-05-25 15:21:50 · 768 阅读 · 0 评论 -
JavaScript「编译时」与「运行时」
在软件开发中,编译时(Compile Time)和运行时(Run Time)是两个不同的阶段,它们各自有特定的作用和发生的时间。编译时(Compile Time):编译时是指源代码被编译器转换成机器码的阶段。在这个阶段,编译器会对源代码进行分析,进行诸如词法分析、语法分析、类型检查、代码优化和代码生成等行为。编译时发生的错误通常包括语法错误、类型错误和其他编译器能检测到的问题。一旦编译完成,产生的输出通常是不依赖原始源代码的可执行文件或者其他中间形式,如字节码。原创 2024-04-12 20:39:07 · 639 阅读 · 0 评论 -
React Antd form.getFieldsValue() 和 form.getFieldsValue(true) 有区别吗?
突然发现 antd 的 getFieldsValue()是可以传一个 true 参数的,如题,React Antd form.getFieldsValue() 和 form.getFieldsValue(true) 有区别吗?当 nameList 为 true 时,返回 store 中所有的值,包含未注册字段。当不提供 nameList 时,返回所有注册字段,这也包含 List 下所有的值(即便 List 下没有绑定 Item)。当 nameList 为数组时,返回规定路径的值。原创 2023-08-24 15:11:18 · 1208 阅读 · 0 评论 -
问了一下 GPT--当前基于 React + TypeScript 的生态中 一名前端工程师需要具备哪些能力?
在当前基于 React + TypeScript 的生态中,你需要掌握一系列的技能和知识,以构建现代化、高效能且可维护的前端应用程序。原创 2024-03-07 09:38:22 · 1017 阅读 · 0 评论 -
「网络」还在使用 RESTful API ? 试一试 GraphQL
GraphQL 和 RESTful API 是两种不同的网络通信接口设计理念,它们都可以用于客户端和服务器之间的数据交换,但是有着不同的工作方式和特点。在 GraphQL 中,我们首先定义 Schema,指定客户端可以查询的数据类型和字段。id: ID!原创 2024-03-07 09:49:25 · 1126 阅读 · 0 评论 -
「React Hook」React 如何封装 Hook 获取上一次 state 的值
类似 usePrevious。原创 2023-08-27 11:12:44 · 1036 阅读 · 0 评论 -
「面试题」JavaScript 实现树形结构和一维数组互相转换
树形结构和一维数组是开发中很容易碰到的情况,也是面试中很容易碰到的手撕题目。原创 2023-09-02 11:41:43 · 446 阅读 · 1 评论 -
「JS 基础」异步解决方案入门
为了解决Javascript 语言的执行环境是单线程所带来的问题,Javascript 将任务的执行模式分为两种:同步和异步同步即为后一个任务等待前一个任务结束再继续执行,程序的执行顺序与任务的排列顺序是一致的异步则完全不同,每一个任务都有一个或者多个回调函数,前一个任务结束后,不是执行后一个任务而是执行回调函数,后一个任务则是不等待前一个任务执行结束就执行。因此,程序的执行顺序与任务的排列是不一致的、异步的。在浏览器端,耗时很长的操作都应该异步执行,从而避免浏览器失去响应。原创 2024-03-22 20:19:36 · 909 阅读 · 0 评论 -
「2024」React 状态管理入门
简单来说,状态指的是某一时刻应用中的数据或界面的呈现。这些数据可能包括用户填写表单的信息、应用内的用户偏好设置、应用的页面/路由状态、或者任何其他可能改变UI的信息。状态管理是前端开发中处理用户界面(UI)状态的过程,在复杂应用中尤其重要。随着应用规模的增长,管理不同组件和模块之间的状态变得越来越复杂。在没有状态管理的情况下,应用组件通常需要进行大量的props传递(即将数据从一个组件传递到另一个组件),或者使用事件来通信,这在小型或简单的应用中是可行的。但在大型或复杂的项目中,这些方法难以维护和跟踪状态的原创 2024-04-09 15:41:20 · 1007 阅读 · 0 评论 -
「JS 基础」迭代器和生成器 Iterator & Generator 入门
JavaScript的生成器(Generators)和迭代器(Iterators)是ES6引入的功能,使得开发者可以更方便地实现自定义的迭代逻辑。在创建自定义数据结构时,你可能需要提供一种遍历结构中元素的方法。迭代器和生成器允许你定义数据结构的迭代逻辑,使其能够使用标准的迭代协议进行遍历。实现一个自定义集合类(如图、树等),并通过生成器为其提供自定义的遍历逻辑。原创 2024-04-13 16:52:36 · 497 阅读 · 0 评论