03 2024 档案

摘要:import resolve from '@rollup/plugin-node-resolve' 这行代码引入了 Rollup.js 的一个插件——@rollup/plugin-node-resolve。 这个插件在使用 Rollup 进行模块打包时起到至关重要的作用,具体作用如下: **1. N 阅读全文 »
posted @ 2024-03-31 22:31 龙陌 阅读(746) 评论(0) 推荐(0) 编辑
摘要:在项目中的 .npmrc 文件中写入一行配置如下: @lands:registry=http://{ip}:4873/ 这一行配置的作用是为特定的 npm 包前缀 @lands 设置了一个自定义的注册表(registry)地址。具体解释如下: 包前缀(Scope):@lands 是一个 npm 包的 阅读全文 »
posted @ 2024-03-31 10:43 龙陌 阅读(154) 评论(0) 推荐(0) 编辑
摘要:tslib 是一个专门用于 TypeScript 项目的辅助工具库,它的主要目的是帮助 TypeScript 编译后的 JavaScript 代码变得更精简和高效。 当使用 TypeScript 编写代码并将其编译为 JavaScript 时,编译器会为一些 TypeScript 特性生成额外的辅助 阅读全文 »
posted @ 2024-03-30 23:00 龙陌 阅读(364) 评论(0) 推荐(0) 编辑
摘要:auto-install-peers=true 和 strict-peer-dependencies=false 是与软件包管理器相关的配置选项,它们通常用于控制如何处理项目的依赖关系,特别是涉及到“peer dependencies”的情况。虽然您没有指明具体的包管理器(如npm、yarn等),但 阅读全文 »
posted @ 2024-03-30 21:54 龙陌 阅读(1107) 评论(1) 推荐(0) 编辑
摘要:CSR (Client-Side Rendering) 和 SSR (Server-Side Rendering) 是两种不同的网页渲染方式,它们决定了浏览器如何获取和展示网页内容: CSR (Client-Side Rendering): 定义:客户端渲染是指网页内容的生成和渲染主要在用户浏览器端 阅读全文 »
posted @ 2024-03-30 21:40 龙陌 阅读(499) 评论(0) 推荐(0) 编辑
摘要:在 package.json 文件的 "peerDependenciesMeta" 字段中,你可以为 peerDependencies 中列出的依赖项提供额外的元数据信息。这里给出的例子: "peerDependenciesMeta": { "@vue/composition-api": { "op 阅读全文 »
posted @ 2024-03-30 21:38 龙陌 阅读(118) 评论(0) 推荐(0) 编辑
摘要:.eslintignore 文件中的 **/_* 是一个 glob 模式,用于指定 ESLint 应该忽略哪些文件或目录。具体解释如下: **:表示任意层级的子目录。它会递归地匹配当前目录及其所有子目录下的文件和目录。 /:在 glob 模式中,斜线 / 用于分隔目录层级。 _*:表示以 _ 符号开 阅读全文 »
posted @ 2024-03-30 18:50 龙陌 阅读(65) 评论(0) 推荐(0) 编辑
摘要:在网页设计、营销材料、广告宣传等情境中,“hero” 和 “features” 分别代表不同的概念: Hero: 在网页设计中,Hero 是指网站主页或其他重要页面顶部占据显著位置的大型图像或视频区域,通常搭配简短的文字标题和行动召唤按钮(Call To Action,简称CTA), 用于吸引用户的 阅读全文 »
posted @ 2024-03-29 00:12 龙陌 阅读(289) 评论(0) 推荐(0) 编辑
摘要:react 组件加上 displayName 属性的作用是什么 在React中,为组件添加displayName属性的主要作用是方便调试和识别组件。在开发过程中,尤其是在查看浏览器开发者工具(如React DevTools扩展)时,displayName属性的值会显示为组件的名称,这对于追踪组件层次 阅读全文 »
posted @ 2024-03-26 23:49 龙陌 阅读(521) 评论(0) 推荐(0) 编辑
摘要:react要避免闭包问题,具体指的是哪些? 在React中要避免的闭包问题主要指的是以下几个方面: 状态更新滞后问题: 当在事件处理器、定时器、异步回调等闭包中直接引用状态变量时,可能由于闭包绑定的是变量的旧值,导致状态更新后闭包内的引用并未随之更新。 例如,在 useEffect 或 useCal 阅读全文 »
posted @ 2024-03-26 23:38 龙陌 阅读(107) 评论(0) 推荐(0) 编辑
摘要:immer 和useImmer两个库有啥区别 immer 和 useImmer 是两个紧密相关的库,但它们在用途上有一定的区别: immer: immer 是一个 JavaScript 库,专注于提供一种简洁高效的不可变数据管理方式。它利用 Proxy 对象和 WeakMap 实现了所谓的“prox 阅读全文 »
posted @ 2024-03-24 19:59 龙陌 阅读(390) 评论(0) 推荐(0) 编辑
摘要:在前端开发中,BFF(Backend For Frontend,服务于前端的后端)是一种架构模式,它旨在优化前后端分离架构下的前端用户体验和服务集成。 在微服务架构中尤其常见,BFF 作为一种中间层,位于前端应用与后端服务之间,它的主要作用是: 聚合服务:将来自多个后端服务的数据整合在一起,提供前端 阅读全文 »
posted @ 2024-03-24 12:39 龙陌 阅读(733) 评论(0) 推荐(0) 编辑
摘要:react中什么时候使用useRef,直接在外层定义普通的变量可以吗 在React中,useRef 主要是用来创建一个可变的引用对象,它可以用来保存任何可变值,而且这个引用在组件重新渲染时始终保持不变。以下是几个典型使用场景: 访问DOM元素: 当你需要直接访问HTML元素时,可以使用 useRef 阅读全文 »
posted @ 2024-03-24 11:53 龙陌 阅读(301) 评论(0) 推荐(0) 编辑
摘要:https://github.com/wkylin/pro-sale-charge/blob/df7fa93c8673701e6897f18498cab78a7fbb05d7/webpack/webpack.dev.js#L77C1-L92C3 const portfinder = require( 阅读全文 »
posted @ 2024-03-24 11:36 龙陌 阅读(45) 评论(0) 推荐(0) 编辑
摘要:ReactRefreshWebpackPlugin 是一个专门为 React 应用程序提供快速热更新(Fast Refresh / Hot Reloading)的 Webpack 插件。 当你的 React 组件代码发生变化时,它能够自动重新渲染受影响的组件,而不是刷新整个页面,从而显著提升开发效率 阅读全文 »
posted @ 2024-03-24 11:35 龙陌 阅读(342) 评论(0) 推荐(0) 编辑
摘要:git tag -a v1.2.0 -m "version: 1.2.0" 这个是什么意思 git tag -a v1.2.0 -m "version: 1.2.0" 是 Git 命令行中创建带有注解(annotated)标签的操作。具体含义和作用如下: git tag: 基础命令,用于创建、列出、 阅读全文 »
posted @ 2024-03-24 11:00 龙陌 阅读(53) 评论(0) 推荐(0) 编辑
摘要:在 pnpm 工作区(monorepo)中,hoist-pattern 配置项用于决定哪些依赖应该被提升(hoist)到工作区的根节点 node_modules 目录中,而不是保留在每个工作区包各自的 node_modules 目录下。这有助于减少磁盘空间占用并加速依赖的安装速度。 hoist-pa 阅读全文 »
posted @ 2024-03-24 10:59 龙陌 阅读(253) 评论(0) 推荐(0) 编辑
摘要:在使用 {"dependencies": {"my-component-library-b": "workspace:^"}} 方式引用组件库 B 时,由于 B 包是作为工作区的一部分,因此在这种情况下,你不需要将 B 包预先打包成库文件(如UMD、CommonJS或ES模块格式)。 Yarn Wo 阅读全文 »
posted @ 2024-03-24 10:02 龙陌 阅读(158) 评论(0) 推荐(0) 编辑
摘要:在使用 Yarn Workspaces 时,有业务包A和组件库包B,两个包分别引用了antd4 和antd5 三方包,安装依赖时该注意什么? 在使用 Yarn Workspaces 的项目中,如果有业务包 A 和组件库包 B,分别引用了 antd v4 和 antd v5 两个不同版本的三方包,安装 阅读全文 »
posted @ 2024-03-24 09:59 龙陌 阅读(249) 评论(0) 推荐(0) 编辑
摘要:yarn workspaces focus @my-org/app 解释这段 yarn workspaces focus @my-org/app 是Yarn Workspaces的一个命令,这个命令允许你在具有多个工作区(workspace)的monorepo(单体仓库)项目中集中注意力和资源只在一 阅读全文 »
posted @ 2024-03-24 09:56 龙陌 阅读(48) 评论(0) 推荐(0) 编辑
摘要:# http://editorconfig.org root = true [*] # 表示所有文件适用 charset = utf-8 # 设置文件字符集为 utf-8 indent_style = tab # 缩进风格(tab | space) indent_size = 4 # 缩进大小 en 阅读全文 »
posted @ 2024-03-24 09:32 龙陌 阅读(43) 评论(0) 推荐(0) 编辑
摘要:export function enumToObject<T extends Record<keyof T, number | string>>( enumObj: T, ): { [K in keyof T]: ROUTE_ID_KEY } { const obj = {} as { [K in 阅读全文 »
posted @ 2024-03-24 09:19 龙陌 阅读(7) 评论(0) 推荐(0) 编辑
摘要:zustand subscribeWithSelector 使用 Zustand 提供了一个名为 subscribeWithSelector 的高级功能,允许你在订阅状态时使用一个选择器函数(selector function),类似于 Redux 的 reselect。选择器函数能够更高效地追踪和 阅读全文 »
posted @ 2024-03-24 00:11 龙陌 阅读(919) 评论(0) 推荐(0) 编辑
摘要:const [increaseBigCats, increaseSmallCats] = useCatStore( (state) => [state.increaseBigCats, state.increaseSmallCats], shallow ); 这段代码是在使用 zustand 这个 阅读全文 »
posted @ 2024-03-23 23:33 龙陌 阅读(17) 评论(0) 推荐(0) 编辑
摘要:eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0 解释一下这段命令 这段命令是用来运行 ESLint 工具检查代码的,针对的是 src 目录下所有 .ts 和 .tsx 后缀的 TypeScript 阅读全文 »
posted @ 2024-03-23 23:18 龙陌 阅读(288) 评论(0) 推荐(0) 编辑
摘要:这段代码是 ES6 模块导出的一种简写形式,被称为“命名导出”。 它的作用是从源模块('./userInfo')导入默认导出,并赋予一个新的本地名称('useUserInfoStore')。 这种写法可以让使用者在引用时,直接使用新的本地名称,而不是原始模块的默认导出名称。 详细解释: './use 阅读全文 »
posted @ 2024-03-23 23:06 龙陌 阅读(29) 评论(0) 推荐(0) 编辑
摘要:这段代码是 TypeScript 类型注解,用于定义变量 userInfo 的数据类型。具体解释如下: Record<string, any>:Record<Keys, Type> 是 TypeScript 中的一个泛型类型,表示一个对象类型,其中 Keys 参数指定了对象的键类型,Type 参数指 阅读全文 »
posted @ 2024-03-23 23:02 龙陌 阅读(90) 评论(0) 推荐(0) 编辑
摘要:在React中,要在表格数据变化后且下一次渲染完成后执行表单校验逻辑,可以考虑在useEffect钩子中处理这个问题。useEffect会在每次渲染完成后的DOM更新之后执行指定的回调函数。 以下是一个简化的示例: import React, { useState, useEffect } from 阅读全文 »
posted @ 2024-03-23 17:05 龙陌 阅读(92) 评论(0) 推荐(0) 编辑
摘要:算法题 function parseItem(item) { const isNumber = typeof item 'number'; const strItem = isNumber ? String(item) : item; const dashIndex = strItem.indexO 阅读全文 »
posted @ 2024-03-19 23:55 龙陌 阅读(6) 评论(0) 推荐(0) 编辑
摘要:const renderStartTime = useCallback((text, record, idx, changeTableData) => { return ( <CacheRender dataIndex="startTime" controlRules={() => startTim 阅读全文 »
posted @ 2024-03-19 09:10 龙陌 阅读(15) 评论(0) 推荐(0) 编辑
摘要:在这里,将tableData添加到useEffect的依赖数组会导致无限循环。因为在useEffect内部更新了tableData状态,每次状态改变又会触发useEffect再次执行,形成无限循环。 解决这个问题的一种方法是,在状态更新时创建一个新的数组,而不是直接修改现有数组。这样就不会触发依赖数 阅读全文 »
posted @ 2024-03-18 23:44 龙陌 阅读(9) 评论(0) 推荐(0) 编辑
摘要:可编辑表格中的两个列分别是用react-hook-form 和antd的inputNumber实现的,需要在开始时间的列输入后失焦时,或者按enter键,鼠标聚焦到下一列,即结束时间,该如何设置 在React项目中,要实现在一个可编辑表格中,当开始时间列输入后失焦或按下Enter键时,自动将焦点切换 阅读全文 »
posted @ 2024-03-17 22:43 龙陌 阅读(79) 评论(0) 推荐(0) 编辑
摘要:在使用React的useCallback Hook时,如果直接包裹一个函数而没有提供类型参数,TypeScript会默认认为回调函数的参数类型为any。这是因为useCallback Hook接受两个参数,第一个是回调函数,第二个是一个依赖数组,而TypeScript在没有明确指定类型的情况下无法推 阅读全文 »
posted @ 2024-03-17 19:31 龙陌 阅读(39) 评论(0) 推荐(0) 编辑
摘要:Wizard Form / Funnel Form 的中文翻译分别是“向导表单”和“漏斗表单”。 向导表单(Wizard Form):也称为多步骤表单或多阶段表单,是一种分步骤指导用户填写表单的设计模式,如同向导一样带领用户一步一步完成表单填写。 漏斗表单(Funnel Form):虽然通常“fun 阅读全文 »
posted @ 2024-03-17 17:35 龙陌 阅读(56) 评论(0) 推荐(0) 编辑
摘要:在代码注释中,除了常见的 TODO、FIXME 和 XXX 外,还有一些其他的特殊注释标签也被开发人员广泛使用,用于标记代码中不同类型的待处理项。以下是一些类似的注释标签: TODO - 表示这里有待完成的任务或者待实现的功能。 FIXME - 指出代码中存在问题或bug,需要修复的地方。 XXX 阅读全文 »
posted @ 2024-03-17 00:07 龙陌 阅读(1577) 评论(0) 推荐(0) 编辑
摘要:在render里能否直接将field 传递给antd的input 当然可以,在render函数中,可以直接将field对象的部分或全部属性传递给Ant Design的Input组件,这样可以让Input组件完全受控于react-hook-form的Controller组件。 例如,您可以像下面这样简 阅读全文 »
posted @ 2024-03-17 00:07 龙陌 阅读(170) 评论(0) 推荐(0) 编辑
摘要:对于下拉框的数据获取,是否需要单独拆分出一个hook取决于项目的具体需求和代码组织结构。以下是一些考虑因素: 复用性: 如果项目中多个地方都需要从同一个API或者同一个数据源获取下拉框选项数据,并且处理逻辑相同,那么创建一个专门的hooks用于获取并处理下拉框数据是合理的。这样可以避免代码重复,提高 阅读全文 »
posted @ 2024-03-16 00:26 龙陌 阅读(42) 评论(0) 推荐(0) 编辑
摘要:关于表单回显和数据绑定的最佳实践,可以遵循以下几点: 双向数据绑定: 使用现代前端框架(如Vue、React或Angular)提供的双向数据绑定功能。例如,在Vue中使用v-model指令实现输入控件与组件状态的自动同步;在React中,可以通过useState hook或者第三方库如react-h 阅读全文 »
posted @ 2024-03-16 00:07 龙陌 阅读(407) 评论(0) 推荐(0) 编辑
摘要:当然可以。Zustand 作为一个轻量级的状态管理库,非常适合用来作为局部作用域的数据统一存储方案。 相较于 Redux,它更注重简洁性和易用性,并且充分利用了 React Hooks 的特性。 在使用 Zustand 时,你可以创建多个独立的 store 来管理不同组件或模块的本地状态。 每个 s 阅读全文 »
posted @ 2024-03-15 23:52 龙陌 阅读(183) 评论(0) 推荐(0) 编辑
摘要:在前端开发中,针对后端返回的多变数据结构进行处理以适应页面展示需求的最佳实践包括以下几个方面: 定义清晰的数据模型: 在前端根据UI设计和功能需求明确所需的数据结构,并创建对应的JavaScript对象模型(或使用TypeScript等类型语言提供静态类型检查)。 这有助于前端开发者预先了解并规划如 阅读全文 »
posted @ 2024-03-15 23:48 龙陌 阅读(209) 评论(0) 推荐(0) 编辑
摘要:前端开发时,应该如何考虑开发的主次先后,比如数据结构、数据流转、UI绘制,js逻辑等等,请给出你的最佳实践 在前端开发中,正确规划和安排各项任务的主次先后对于项目的顺利进行至关重要。以下是一个针对数据结构、数据流转、UI绘制以及JavaScript逻辑等方面的开发优先级与最佳实践建议: 需求分析与设 阅读全文 »
posted @ 2024-03-15 23:38 龙陌 阅读(82) 评论(0) 推荐(0) 编辑
摘要:是的,一般情况下后端返回的数据结构确实可能与前端需要展示的结构不完全一样。原因有以下几点: 数据库存储结构: 后端从数据库中查询到的数据通常遵循数据库表的设计,包括关系型数据库中的外键关联、嵌套数据等。这些数据可能是为了满足数据库设计规范和查询效率而组织的,并不一定直接符合前端展示的需求。 业务逻辑 阅读全文 »
posted @ 2024-03-15 23:30 龙陌 阅读(126) 评论(0) 推荐(0) 编辑
摘要:后端返回的数据可能不一定完全符合前端页面展示的需求,这取决于后端API设计和前端UI/UX的设计。 有时后端返回的数据可能是原始数据或者为了满足数据库存储需求的结构化数据,而前端可能需要对这些数据进行处理以便更好地呈现给用户。 数据适配: 如果后端返回的数据结构与前端展示所需不同,那么前端通常需要在 阅读全文 »
posted @ 2024-03-15 23:27 龙陌 阅读(61) 评论(0) 推荐(0) 编辑
摘要:后端返回的值,不能直接用于表单展示,有的表单项的值是根据其他表单项计算出来的,有的是根据下拉框的选中项的其他属性获取到的,这时候该如何处理?还有最后要保存的时候,传给后端的值,与表单的数据结构也不一样,有的甚至没有放在表单属性上,比如当前下拉框选中的对象而非id,整个需要传给后端 在这种情况下,处理 阅读全文 »
posted @ 2024-03-15 23:26 龙陌 阅读(34) 评论(0) 推荐(0) 编辑
摘要:当后端返回的数据是多层嵌套结构时,传递给各个Tab和子组件(如表单和表格)可以按照以下步骤进行: 状态管理: 使用React的状态管理库如Redux、MobX或React的Context API来集中存储从后端获取的多层嵌套数据。这样可以确保所有子组件都可以访问到这些数据。 // 使用Redux示例 阅读全文 »
posted @ 2024-03-15 23:23 龙陌 阅读(68) 评论(0) 推荐(0) 编辑
摘要:如果我使用了react-hook-form,还有必要使用antd的form组件吗?还是直接使用原生的表单组件?例如输入框下拉框? 使用 react-hook-form 和是否选择使用 antd 的 Form 组件并不互斥,具体取决于你的项目需求和个人偏好。以下是两者结合使用时的一些考量点: Reac 阅读全文 »
posted @ 2024-03-14 23:19 龙陌 阅读(368) 评论(0) 推荐(0) 编辑
摘要:useImperativeHandle是React Hooks中的一个API,它的主要作用是定制暴露给父组件的子组件实例的引用。 通常与forwardRef配合使用,用于控制哪些属性或方法能够被父组件通过ref获取和操作。 然而,useImperativeHandle并不能直接用来暴露state属性 阅读全文 »
posted @ 2024-03-14 23:14 龙陌 阅读(248) 评论(0) 推荐(0) 编辑
摘要:export type Primitive = undefined | null | boolean | string | number | symbol; export type DeepRequired<T> = T extends Primitive ? T : keyof T extends 阅读全文 »
posted @ 2024-03-13 00:08 龙陌 阅读(35) 评论(0) 推荐(0) 编辑
摘要:for( )循环 通过下标,对循环中的代码反复执行,功能强大,可以通过index取得元素。在处理比较复杂的处理的时候较为方便 forEach( )循环 forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。 foreach有的也叫增强for循环,foreach其实是for循环的一个 阅读全文 »
posted @ 2024-03-10 00:19 龙陌 阅读(626) 评论(0) 推荐(0) 编辑
摘要:在CSS Modules中,使用Less编译器编译并转换成模块化CSS后,你不需要在JavaScript中通过style.xxx的方式进行嵌套引用。当你在Less文件中使用嵌套语法编写样式时,编译过程会自动将这些嵌套转换为扁平化的类名,并且生成一个映射对象。 例如,在Less文件(假设为styles 阅读全文 »
posted @ 2024-03-04 19:09 龙陌 阅读(308) 评论(0) 推荐(1) 编辑
摘要:在 TypeScript 中,Pick 和 Extract 是两种不同的类型操作工具。它们分别用于从一个已有的类型中选择或提取部分属性和从联合类型中提取符合条件的类型。 Pick 类型 Pick<T, K> 用于从类型 T 中选取指定的键 K 所对应的属性,创建一个新的类型。 示例: interfa 阅读全文 »
posted @ 2024-03-04 15:34 龙陌 阅读(106) 评论(0) 推荐(0) 编辑
摘要:有一个子组件DataList,然后在父组件中引入,并在父组件引入中的DataList标签上设置style样式,能生效吗? 在React中,父组件可以通过props将样式传递给子组件,并在子组件内部应用这些样式。 但直接在父组件引用子组件的地方设置style属性通常不会生效,因为React的JSX语法 阅读全文 »
posted @ 2024-03-04 15:09 龙陌 阅读(26) 评论(0) 推荐(0) 编辑
摘要:在 TypeScript 中,当你在一个文件中添加 export {} 时,其作用主要有以下几点: 创建模块(Module): 在 TypeScript 中,每个 .ts 文件都是一个模块。通过添加空的 export {},即使该文件当前没有实际导出任何内容,也明确地将文件标记为一个模块。 这样可以 阅读全文 »
posted @ 2024-03-03 10:54 龙陌 阅读(530) 评论(0) 推荐(0) 编辑
摘要:下方数据结构可以被描述为一个JavaScript对象(Object),其中每个键是一个UUID(Universally Unique Identifier),值是一个待办事项对象。 在编程和数据结构领域,这种组织形式没有一个特定的官方名称,但它通常被称为“字典”、“映射”、“关联数组”或“哈希表”。 阅读全文 »
posted @ 2024-03-02 23:42 龙陌 阅读(63) 评论(0) 推荐(0) 编辑
摘要:pnpm link --global 是 pnpm(一个更快、更节省磁盘空间的 Node.js 包管理器)中的命令,它用于全局链接本地开发的包。 当你在开发一个自定义的 npm 包,并希望在全局环境中像已安装的全局包那样试用它时,可以使用 pnpm link --global 命令。 具体步骤如下: 阅读全文 »
posted @ 2024-03-02 21:48 龙陌 阅读(2102) 评论(0) 推荐(0) 编辑
摘要:"DRY things up" 这个短语在计算机编程领域中,是一个源自“Don't Repeat Yourself”(简称DRY)原则的概念。 这个原则强调在编写软件代码时应尽量避免重复劳动和复制粘贴代码,提倡将常用或重复的功能抽象成可复用的模块、函数或类。 所以,当说 "DRY things up 阅读全文 »
posted @ 2024-03-02 21:21 龙陌 阅读(16) 评论(0) 推荐(0) 编辑
摘要:dragable: 默认值为false,可以用于拖拽,但是一个虚拟的。 a标签,img标签默认自带拖拽,(只有chrome,safari可以使用,firefox不支持,ie不支持) 在HTML5中,img标签默认是可拖动的(至少在某些浏览器如Chrome和Safari中)。 当用户尝试拖动图片时,浏 阅读全文 »
posted @ 2024-03-01 09:41 龙陌 阅读(482) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示