摘要：
useEffect 传入的函数，它的返回值要么是一个方法（清理函数），要么就是undefined，其他情况都会报错 比较常见的一个情况是，我们的 useEffect 需要执行一个 async 函数，比如： // ❌ // Type 'Promise<void>' provides no match
阅读全文
posted @ 2024-02-07 15:42
龙陌
阅读(121)
推荐(0)
摘要：
在 react-dnd 这个库中，"dnd" 是 "Drag and Drop" 的缩写，表示拖拽与放置（拖放）功能。 react-dnd 是一个用于 React 应用程序的强大的拖放库，它允许开发者轻松地在 React 组件之间实现拖放交互功能，从而提升用户界面的互动性和用户体验。 通过使用 re
阅读全文
posted @ 2024-02-07 15:27
龙陌
阅读(207)
推荐(0)
摘要：
global.d.ts 文件在 TypeScript 项目中是一个全局声明文件，它的作用是为全局范围内的变量、函数或其他类型提供类型定义。 这个文件中的声明可以让TypeScript编译器知道那些在运行时存在的、但未包含在任何模块中的全局变量和函数等。 例如，在浏览器环境中，一些全局对象如 wind
阅读全文
posted @ 2024-02-07 11:38
龙陌
阅读(1453)
推荐(0)
摘要：
在前端开发时，当需要将用户输入或者动态生成的字符串作为URL的一部分（特别是查询参数或路径片段）发送到服务器时，应当使用 encodeURIComponent 函数对字符串进行编码。 以下是一些具体场景： 查询参数： 当你在URL中添加查询参数（query parameters），例如通过 ?key
阅读全文
posted @ 2024-02-07 10:59
龙陌
阅读(353)
推荐(0)
摘要：
isOfType 是一个类型保护函数，它用于在运行时检查传入的变量是否具有指定类型的特定属性。以下是对这个方法的设计和使用文档的描述： 设计 export const isOfType = <T>( varToBeChecked: any, propertyToCheckFor: keyof T )
阅读全文
posted @ 2024-02-06 16:35
龙陌
阅读(45)
推荐(0)
摘要：
在现代前端项目中，特别是在使用webpack等构建工具时，~@ 是一种约定的写法，用于处理模块化的CSS或预处理器（如Less、Sass）文件的导入。 这里的 ~@/commonStyles/index.less 表示： ~ 符号：在一些构建系统中（尤其是webpack），此符号告诉构建工具这是一个
阅读全文
posted @ 2024-02-06 15:58
龙陌
阅读(456)
推荐(0)
摘要：
在TypeScript中，Omit<T, K>是一个内置的实用类型（从TypeScript 3.5版本开始提供），用于创建一个新的类型，该类型包含了原始类型T的所有属性，但排除了指定的键K。 其定义如下： type Omit<T, K extends keyof any> = Pick<T, Exc
阅读全文
posted @ 2024-02-06 14:31
龙陌
阅读(64)
推荐(0)
摘要：
弹窗组件（Modal）是否需要使用记忆化（memoization），主要取决于该组件的性能优化需求以及其内部复杂性。记忆化是一种用于优化函数或组件性能的技术，它通过缓存先前计算的结果以避免在相同的输入参数下重复执行耗时的操作。 对于一个简单的弹窗组件而言，如果其内容不涉及复杂的计算或者大量数据处理，
阅读全文
posted @ 2024-02-06 13:37
龙陌
阅读(57)
推荐(0)
摘要：
"resolutions": { "es6-iterator//es5-ext": "0.10.50", "d//es5-ext": "0.10.50", "es5-ext": "0.10.50" } 这个是什么意思？ 这段配置是出现在 package.json 文件中的 "resolutions"
阅读全文
posted @ 2024-02-05 20:45
龙陌
阅读(721)
推荐(0)
摘要：
React中的错误边界处理是指的哪些？ 在React中，错误边界（Error Boundaries）是一种React组件，它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误，并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时，
阅读全文
posted @ 2024-02-05 20:37
龙陌
阅读(111)
推荐(0)
摘要：
ARIA 创作实践指南 （APG） https://www.w3.org/WAI/ARIA/apg/
阅读全文
posted @ 2024-02-05 20:29
龙陌
阅读(32)
推荐(0)
摘要：
在React中，命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制（如setState、useState Hook等）的操作。React的核心理念是声明式编程，它鼓励开发者描述UI应该是什么样子，而不是如何改变它。 命令式行为示例包括： 直接操作DOM： 使用原生Jav
阅读全文
posted @ 2024-02-05 19:39
龙陌
阅读(82)
推荐(1)
摘要：
命令式句柄（imperative handle）是什么意思？ 在计算机科学中，特别是在图形用户界面（GUI）和某些编程语言的上下文中，“命令式句柄”通常指的是对某个对象或资源的一种间接引用。 它是一个特殊的标识符，用于操作对象而不直接访问对象本身。 例如，在Windows API编程中，句柄（Han
阅读全文
posted @ 2024-02-05 19:38
龙陌
阅读(78)
推荐(0)
摘要：
你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄，最好是像 这样，将 isOpen 作为一个 prop。为什么这样要求？ 在React和现代UI开发中，遵循声明式编程范式通常被认为是一种最佳实践。暴露命令式的句柄（如open和close方法）会导致组件之间产生更紧
阅读全文
posted @ 2024-02-05 11:56
龙陌
阅读(96)
推荐(0)
摘要：
在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时，它会请求一些数据，再渲染子组件，然后重复这样的过程来请求子组件的数据。 如果网络不是很快，这将比并行请求所有数据要慢得多。 如何理解？ 在React中，当我们在Effect（例如useEffect Hook）中直接请求数据时，
阅读全文
posted @ 2024-02-05 11:05
龙陌
阅读(210)
推荐(0)
摘要：
Vue.js中，当在单文件组件（.vue 文件）的 <style> 标签上使用 scoped 属性时，Vue Loader 会为组件中的 CSS 添加一个唯一的属性选择器，以确保样式只作用于当前组件内的元素。这个独特的属性通常格式为 data-v-xxx，其中 xxx 是一个根据文件内容和路径生成的
阅读全文
posted @ 2024-02-05 09:33
龙陌
阅读(361)
推荐(0)
摘要：
Yarn 本身设计时就考虑到了并行安装依赖以提高速度，它默认使用多线程来下载和安装包。当执行 yarn install 时，Yarn 会利用所有可用的CPU核心，并通过其内部的并行化机制来加速安装过程。 如果你发现 Yarn 在安装依赖时仍然显得较慢，可以尝试以下方法来优化： 启用网络代理： 如果你
阅读全文
posted @ 2024-02-04 18:59
龙陌
阅读(1394)
推荐(0)
摘要：
编写一份前端页面性能分析报告，需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架： 一、前言 目的：简述报告的目的，比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。 范围：明确分析涉及的页面及其版本信息，以及使用的设备类型、浏览器版本和网络条
阅读全文
posted @ 2024-02-04 10:52
龙陌
阅读(619)
推荐(1)
摘要：
"与事件处理程序不同，事件处理程序只在每次交互时运行一次，而 Effect 则在需要进行同步时运行。" 但是 交互往往会同时触发事件处理，从而引起值变化，进而导致同步，从而运行Effect，不是吗？ 那么如何确定方法应该写在事件处理里还是Effect里面？？ 事件处理程序（Event Handler
阅读全文
posted @ 2024-02-04 10:18
龙陌
阅读(69)
推荐(0)
摘要：
aria-label的作用是什么？ aria-label 属性在网页无障碍（Web Accessibility，简称A11Y）中扮演着至关重要的角色。其主要作用如下： 提供非视觉提示：aria-label 用于为HTML元素提供一个简短、明确的文本描述，这个描述不会在页面上显示出来，但会被屏幕阅读器
阅读全文
posted @ 2024-02-04 09:57
龙陌
阅读(3132)
推荐(0)
摘要：
Vue.js 和 React 在实现响应式原理上有所不同： Vue.js 的响应式机制： 依赖收集（Dependent Data Collection）： Vue 使用了基于 getter/setter 的 Object.defineProperty() 方法，对数据对象的属性进行拦截。当一个组件渲
阅读全文
posted @ 2024-02-02 16:59
龙陌
阅读(371)
推荐(0)
摘要：
npm disturl 是做什么用的? npm disturl 是一个配置项，用于设置npm下载tarball包（通常是Node.js的二进制文件或者一些带有平台相关编译内容的npm模块）时的基础URL。当npm需要从源代码构建依赖项，并且这些依赖项包含需要从特定位置下载的预编译二进制文件时，它会使
阅读全文
posted @ 2024-02-01 09:53
龙陌
阅读(3050)
推荐(0)
摘要：
空值合并运算符 '??' 与 || 比较 https://zh.javascript.info/nullish-coalescing-operator 或运算符 || 可以以与 ?? 运算符相同的方式使用。 ` let firstName = null; let lastName = null; l
阅读全文
posted @ 2024-01-31 19:34
龙陌
阅读(274)
推荐(0)
摘要：
const copyStories = [...stories] 和 let storiesToDisplay = stories.slice(); 两种复制数组的方式，哪种更优雅？ 在JavaScript中，const copyStories = [...stories]（使用扩展运算符）和 le
阅读全文
posted @ 2024-01-31 19:07
龙陌
阅读(32)
推荐(0)
摘要：
代码越精简的越灵活，还是越冗长的越灵活？ 代码的灵活性并不完全取决于其精简或冗长的程度。 精简的代码通常更容易阅读、理解和修改，从而在一定程度上提高了灵活性。 短小精悍的代码能够更清晰地表达意图，减少出错的可能性，并且易于维护和扩展。 然而，冗长的代码不等于不灵活。有些情况下，为了实现复杂的功能或者
阅读全文
posted @ 2024-01-31 16:37
龙陌
阅读(80)
推荐(0)
摘要：
JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。 这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。 JSX 最终会被转化为 JavaScript，而 JSX 中的属性也
阅读全文
posted @ 2024-01-31 15:36
龙陌
阅读(76)
推荐(0)
摘要：
在JavaScript中，unshift() 是数组对象的一个原生方法，它用于向数组的开头添加一个或多个元素，并将原有的数组元素依次向后移动。 这个方法会改变原始数组本身，同时返回新的数组长度。 在英语中，“unshift”不是一个标准的单词，但我们可以将其拆解为“un-”和“shift”。其中：
阅读全文
posted @ 2024-01-31 14:29
龙陌
阅读(4074)
推荐(0)
摘要：
在软件发布中，"Canary" 版本指的是 Canary Channel、Canary Build 或 Canary Release，它通常是指一种高频率更新且可能包含最新（但未经充分测试）功能和改进的版本。 这种版本面向的是愿意接受较高风险并帮助开发者发现潜在问题的用户群体，比如开发者社区、早期尝
阅读全文
posted @ 2024-01-31 14:24
龙陌
阅读(1197)
推荐(0)
摘要：
React.ReactNode 和 React.ReactElement ,更推荐使用哪个？ 在React中，React.ReactNode 和 React.ReactElement 是不同类型，它们适用于不同的场景： React.ReactNode： 类型定义：type ReactNode = R
阅读全文
posted @ 2024-01-31 11:54
龙陌
阅读(1100)
推荐(0)
摘要：
首先，const [count,setCount] = useState(0) 这种语法是ES6的解构赋值语法。 数组在解构赋值时，按照返回的顺序一一解构，并且可以重新命名： const foo = [1,2,3] const [a,b,c] = foo //a=1,b=2,c=3 而对象在解构赋值
阅读全文
posted @ 2024-01-31 09:52
龙陌
阅读(299)
推荐(0)
摘要：
axios实现，在一个极短时间内，请求同一个接口，若传参完全一样，则使用浏览器中的缓存中的上次的值。同时，上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能。 在axios中，我们可以利用浏览器的缓存机制（HTTP缓存）来实现这个需求。不过，浏览器的HTTP缓存主要依赖于服
阅读全文
posted @ 2024-01-30 12:07
龙陌
阅读(404)
推荐(0)
摘要：
在组织机构管理页面的设计中，左树右表和树形表格都是用来展示具有层级结构数据的有效方式。选择哪种布局取决于具体的使用场景、交互需求和用户体验目标。以下是对两种方式的分析以及最佳实践： 左树右表 优点： 结构清晰：左侧树用于展现层级关系，右侧表格详细展示选中节点下的成员信息或具体属性。 操作方便：用户可
阅读全文
posted @ 2024-01-30 11:19
龙陌
阅读(790)
推荐(0)
摘要：
这种代码写法有没有问题？ this.$confirm(`是否确认删除名称为"${row.deptName}"的数据项？`) .then(() => { return deleteDept({ deptId: row.id }); }) .then(() => { this.getList(); th
阅读全文
posted @ 2024-01-30 11:10
龙陌
阅读(58)
推荐(0)
摘要：
删除表格某一行数据后，刷新列表，当前页码需要重置为1吗？给出最佳实践 在删除表格中某一行数据后，是否需要将当前页码重置为1，取决于具体的应用场景和用户体验需求。以下是一些考量因素以及最佳实践： 考量因素： 数据总量与分页逻辑：如果删除操作导致当前页面的数据不足以填充整个页面（例如，删除了最后一页的最
阅读全文
posted @ 2024-01-30 11:03
龙陌
阅读(210)
推荐(0)
摘要：
在左树右表的场景中，用户修改成功后，数据刷新策略取决于以下几个因素： 数据关联性：如果右侧列表中的数据与左侧树形结构紧密相关，即修改了列表项可能影响到左侧树形结构（例如部门或组织架构中，修改一个用户的属性可能导致其所在部门信息变化），则应同步更新左侧的树。 实时性需求：如果系统要求较高程度的数据一致
阅读全文
posted @ 2024-01-30 10:59
龙陌
阅读(119)
推荐(0)
摘要：
在前端开发中，点击修改某一行数据并打开弹窗进行回显时，常见的做法有两种： 从点击行上带出修改对象的数据进行回显： 如果列表渲染时，每一行的数据对象已经完整地加载到前端（例如通过一次性获取所有列表数据或者分页加载时将当前页面数据加载至前端），那么可以直接根据用户点击的行数据更新弹窗内的表单控件。 优点
阅读全文
posted @ 2024-01-30 10:58
龙陌
阅读(276)
推荐(0)
摘要：
点击重置按钮时，列表的行为取决于具体的应用需求和设计。通常有以下两种常见情况： 回到第一页并清空查询条件：当用户点击重置按钮后，应用会清除所有输入框中的查询条件，并将列表刷新回第一页的数据（通常是默认排序或无条件查询的结果）。这种设计在用户想要从头开始检索数据或者需要查看完整未筛选的列表时较为常用。
阅读全文
posted @ 2024-01-30 10:51
龙陌
阅读(855)
推荐(0)
摘要：
内联样式的优点： 使用简单： 使用内联样式的好处就是简单的以组件为中心来实现样式的添加； 扩展方便： 通过使用对象进行样式设置，可以方便的扩展对象来扩展样式； 避免冲突： 样式通过对象的形式定义在组件中，避免了和其他样式的冲突。 在大型项目中，内联样式可能并不是一个很好的选择，因为内联样式还是有
阅读全文
posted @ 2024-01-29 20:51
龙陌
阅读(94)
推荐(0)
摘要：
既可以通过从层次结构更高层组件（如 FilterableProductTable）开始“自上而下”构建，也可以通过从更低层级组件（如 ProductRow）“自下而上”进行构建。在简单的例子中，自上而下构建通常更简单；而在大型项目中，自下而上构建更简单。 为什么这么说呢？合理吗？ 在构建React应
阅读全文
posted @ 2024-01-29 17:25
龙陌
阅读(52)
推荐(0)
摘要：
为什么不能这样使用 Object.assign(state, { visibilityFilter: action.filter })？ 在Redux的reducer中，直接使用Object.assign(state, { visibilityFilter: action.filter })来修改状
阅读全文
posted @ 2024-01-29 16:57
龙陌
阅读(41)
推荐(0)
浙公网安备 33010602011771号