摘要：
在 TypeScript 中，定义子组件的 props 通常有以下两种方式： 接口（Interface）： // 定义一个接口来描述 Props interface MyComponentProps { title: string; items: string[]; onItemSelected:
阅读全文
posted @ 2024-02-25 10:35
龙陌
阅读(131)
推荐(0)
摘要：
在使用了 TypeScript 的 React 项目中，由于 TypeScript 已经提供了静态类型检查的能力，通常不需要再额外使用 prop-types 库进行运行时的类型检查。 TypeScript 在编译阶段就能通过类型注解确保组件之间的 props 类型正确无误，这有助于在开发阶段就发现类
阅读全文
posted @ 2024-02-25 10:04
龙陌
阅读(158)
推荐(0)
摘要：
/* istanbul ignore next */ 是一个针对 Istanbul（或其后续项目 nyc）代码覆盖率工具的特殊注释。 当这个注释出现在 JavaScript 代码中，它指示 Istanbul 在生成代码覆盖率报告时忽略紧跟在该注释之后的一行或多行代码。 Istanbul 是一个流行的
阅读全文
posted @ 2024-02-21 17:10
龙陌
阅读(262)
推荐(0)
摘要：
import { flattenKeys } from '.'; 这行代码是从当前目录（current directory）导入名为 flattenKeys 的函数或变量。 在Node.js项目中，. 表示当前目录的入口文件，通常是 index.js 或者与当前文件在同一目录下的其他导出模块。 这意
阅读全文
posted @ 2024-02-21 17:06
龙陌
阅读(12)
推荐(0)
摘要：
(ColumnTypes[number] & { editable?: boolean; dataIndex: string; })[] 在TypeScript中，这段类型定义可以分解理解： ColumnTypes[number]：首先，如果 ColumnTypes 是一个数组类型（如 Column
阅读全文
posted @ 2024-02-21 14:43
龙陌
阅读(37)
推荐(0)
摘要：
在TypeScript中，Exclude<T, U> 是一个内置的类型操作符，它的作用是从联合类型 T 中排除那些与类型 U 相匹配的类型。 这里的 EditableTableProps["columns"] 表示从 EditableTableProps 这个接口或类型中提取 columns 属性的
阅读全文
posted @ 2024-02-21 14:39
龙陌
阅读(42)
推荐(0)
摘要：
在TypeScript中，Parameters<T>是一个类型操作符，它会提取函数类型T的参数类型作为一个元组（tuple）类型。这里的 typeof Table 指的是获取名为 Table 的构造函数或函数类型的类型。 如果 Table 是一个类或函数，那么 Parameters<typeof T
阅读全文
posted @ 2024-02-21 14:36
龙陌
阅读(197)
推荐(0)
摘要：
提交代码注释率通常是指在开发人员提交的代码中，注释行数占总代码行数的比例。 这是一个衡量代码质量、可读性以及团队规范的重要指标之一。 注释不仅应该包括函数或方法的目的和用法，还应涵盖复杂逻辑、异常处理、设计决策等关键信息。 理想的注释率为多少并没有统一的标准，但一般来说，注释应该足够清晰明了，让其他
阅读全文
posted @ 2024-02-20 14:42
龙陌
阅读(565)
推荐(0)
摘要：
JavaScript 内置的 Number 类型在处理浮点数时的精度问题主要是由以下原因造成的： IEEE 754 浮点数标准： JavaScript 中的数字是基于 IEEE 754 标准实现的双精度浮点数（64位），其中： 最高1位为符号位（0表示正数，1表示负数）。 接下来的11位用于存储指数
阅读全文
posted @ 2024-02-19 20:07
龙陌
阅读(323)
推荐(0)
摘要：
useEffect 传入的函数，它的返回值要么是一个方法（清理函数），要么就是undefined，其他情况都会报错 比较常见的一个情况是，我们的 useEffect 需要执行一个 async 函数，比如： // ❌ // Type 'Promise<void>' provides no match
阅读全文
posted @ 2024-02-07 15:42
龙陌
阅读(106)
推荐(0)
摘要：
在 react-dnd 这个库中，"dnd" 是 "Drag and Drop" 的缩写，表示拖拽与放置（拖放）功能。 react-dnd 是一个用于 React 应用程序的强大的拖放库，它允许开发者轻松地在 React 组件之间实现拖放交互功能，从而提升用户界面的互动性和用户体验。 通过使用 re
阅读全文
posted @ 2024-02-07 15:27
龙陌
阅读(190)
推荐(0)
摘要：
global.d.ts 文件在 TypeScript 项目中是一个全局声明文件，它的作用是为全局范围内的变量、函数或其他类型提供类型定义。 这个文件中的声明可以让TypeScript编译器知道那些在运行时存在的、但未包含在任何模块中的全局变量和函数等。 例如，在浏览器环境中，一些全局对象如 wind
阅读全文
posted @ 2024-02-07 11:38
龙陌
阅读(1385)
推荐(0)
摘要：
在前端开发时，当需要将用户输入或者动态生成的字符串作为URL的一部分（特别是查询参数或路径片段）发送到服务器时，应当使用 encodeURIComponent 函数对字符串进行编码。 以下是一些具体场景： 查询参数： 当你在URL中添加查询参数（query parameters），例如通过 ?key
阅读全文
posted @ 2024-02-07 10:59
龙陌
阅读(328)
推荐(0)
摘要：
isOfType 是一个类型保护函数，它用于在运行时检查传入的变量是否具有指定类型的特定属性。以下是对这个方法的设计和使用文档的描述： 设计 export const isOfType = <T>( varToBeChecked: any, propertyToCheckFor: keyof T )
阅读全文
posted @ 2024-02-06 16:35
龙陌
阅读(30)
推荐(0)
摘要：
在现代前端项目中，特别是在使用webpack等构建工具时，~@ 是一种约定的写法，用于处理模块化的CSS或预处理器（如Less、Sass）文件的导入。 这里的 ~@/commonStyles/index.less 表示： ~ 符号：在一些构建系统中（尤其是webpack），此符号告诉构建工具这是一个
阅读全文
posted @ 2024-02-06 15:58
龙陌
阅读(431)
推荐(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
龙陌
阅读(46)
推荐(0)
摘要：
弹窗组件（Modal）是否需要使用记忆化（memoization），主要取决于该组件的性能优化需求以及其内部复杂性。记忆化是一种用于优化函数或组件性能的技术，它通过缓存先前计算的结果以避免在相同的输入参数下重复执行耗时的操作。 对于一个简单的弹窗组件而言，如果其内容不涉及复杂的计算或者大量数据处理，
阅读全文
posted @ 2024-02-06 13:37
龙陌
阅读(46)
推荐(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
龙陌
阅读(680)
推荐(0)
摘要：
React中的错误边界处理是指的哪些？ 在React中，错误边界（Error Boundaries）是一种React组件，它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误，并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时，
阅读全文
posted @ 2024-02-05 20:37
龙陌
阅读(93)
推荐(0)
摘要：
ARIA 创作实践指南 （APG） https://www.w3.org/WAI/ARIA/apg/
阅读全文
posted @ 2024-02-05 20:29
龙陌
阅读(23)
推荐(0)
摘要：
在React中，命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制（如setState、useState Hook等）的操作。React的核心理念是声明式编程，它鼓励开发者描述UI应该是什么样子，而不是如何改变它。 命令式行为示例包括： 直接操作DOM： 使用原生Jav
阅读全文
posted @ 2024-02-05 19:39
龙陌
阅读(64)
推荐(1)
摘要：
命令式句柄（imperative handle）是什么意思？ 在计算机科学中，特别是在图形用户界面（GUI）和某些编程语言的上下文中，“命令式句柄”通常指的是对某个对象或资源的一种间接引用。 它是一个特殊的标识符，用于操作对象而不直接访问对象本身。 例如，在Windows API编程中，句柄（Han
阅读全文
posted @ 2024-02-05 19:38
龙陌
阅读(63)
推荐(0)
摘要：
你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄，最好是像 这样，将 isOpen 作为一个 prop。为什么这样要求？ 在React和现代UI开发中，遵循声明式编程范式通常被认为是一种最佳实践。暴露命令式的句柄（如open和close方法）会导致组件之间产生更紧
阅读全文
posted @ 2024-02-05 11:56
龙陌
阅读(75)
推荐(0)
摘要：
在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时，它会请求一些数据，再渲染子组件，然后重复这样的过程来请求子组件的数据。 如果网络不是很快，这将比并行请求所有数据要慢得多。 如何理解？ 在React中，当我们在Effect（例如useEffect Hook）中直接请求数据时，
阅读全文
posted @ 2024-02-05 11:05
龙陌
阅读(191)
推荐(0)
摘要：
Vue.js中，当在单文件组件（.vue 文件）的 <style> 标签上使用 scoped 属性时，Vue Loader 会为组件中的 CSS 添加一个唯一的属性选择器，以确保样式只作用于当前组件内的元素。这个独特的属性通常格式为 data-v-xxx，其中 xxx 是一个根据文件内容和路径生成的
阅读全文
posted @ 2024-02-05 09:33
龙陌
阅读(318)
推荐(0)
摘要：
Yarn 本身设计时就考虑到了并行安装依赖以提高速度，它默认使用多线程来下载和安装包。当执行 yarn install 时，Yarn 会利用所有可用的CPU核心，并通过其内部的并行化机制来加速安装过程。 如果你发现 Yarn 在安装依赖时仍然显得较慢，可以尝试以下方法来优化： 启用网络代理： 如果你
阅读全文
posted @ 2024-02-04 18:59
龙陌
阅读(1320)
推荐(0)
摘要：
编写一份前端页面性能分析报告，需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架： 一、前言 目的：简述报告的目的，比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。 范围：明确分析涉及的页面及其版本信息，以及使用的设备类型、浏览器版本和网络条
阅读全文
posted @ 2024-02-04 10:52
龙陌
阅读(583)
推荐(1)
摘要：
"与事件处理程序不同，事件处理程序只在每次交互时运行一次，而 Effect 则在需要进行同步时运行。" 但是 交互往往会同时触发事件处理，从而引起值变化，进而导致同步，从而运行Effect，不是吗？ 那么如何确定方法应该写在事件处理里还是Effect里面？？ 事件处理程序（Event Handler
阅读全文
posted @ 2024-02-04 10:18
龙陌
阅读(53)
推荐(0)
摘要：
aria-label的作用是什么？ aria-label 属性在网页无障碍（Web Accessibility，简称A11Y）中扮演着至关重要的角色。其主要作用如下： 提供非视觉提示：aria-label 用于为HTML元素提供一个简短、明确的文本描述，这个描述不会在页面上显示出来，但会被屏幕阅读器
阅读全文
posted @ 2024-02-04 09:57
龙陌
阅读(3020)
推荐(0)
摘要：
Vue.js 和 React 在实现响应式原理上有所不同： Vue.js 的响应式机制： 依赖收集（Dependent Data Collection）： Vue 使用了基于 getter/setter 的 Object.defineProperty() 方法，对数据对象的属性进行拦截。当一个组件渲
阅读全文
posted @ 2024-02-02 16:59
龙陌
阅读(346)
推荐(0)
摘要：
npm disturl 是做什么用的? npm disturl 是一个配置项，用于设置npm下载tarball包（通常是Node.js的二进制文件或者一些带有平台相关编译内容的npm模块）时的基础URL。当npm需要从源代码构建依赖项，并且这些依赖项包含需要从特定位置下载的预编译二进制文件时，它会使
阅读全文
posted @ 2024-02-01 09:53
龙陌
阅读(2946)
推荐(0)
摘要：
空值合并运算符 '??' 与 || 比较 https://zh.javascript.info/nullish-coalescing-operator 或运算符 || 可以以与 ?? 运算符相同的方式使用。 ` let firstName = null; let lastName = null; l
阅读全文
posted @ 2024-01-31 19:34
龙陌
阅读(216)
推荐(0)
摘要：
const copyStories = [...stories] 和 let storiesToDisplay = stories.slice(); 两种复制数组的方式，哪种更优雅？ 在JavaScript中，const copyStories = [...stories]（使用扩展运算符）和 le
阅读全文
posted @ 2024-01-31 19:07
龙陌
阅读(18)
推荐(0)
摘要：
代码越精简的越灵活，还是越冗长的越灵活？ 代码的灵活性并不完全取决于其精简或冗长的程度。 精简的代码通常更容易阅读、理解和修改，从而在一定程度上提高了灵活性。 短小精悍的代码能够更清晰地表达意图，减少出错的可能性，并且易于维护和扩展。 然而，冗长的代码不等于不灵活。有些情况下，为了实现复杂的功能或者
阅读全文
posted @ 2024-01-31 16:37
龙陌
阅读(66)
推荐(0)
摘要：
JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。 这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。 JSX 最终会被转化为 JavaScript，而 JSX 中的属性也
阅读全文
posted @ 2024-01-31 15:36
龙陌
阅读(69)
推荐(0)
摘要：
在JavaScript中，unshift() 是数组对象的一个原生方法，它用于向数组的开头添加一个或多个元素，并将原有的数组元素依次向后移动。 这个方法会改变原始数组本身，同时返回新的数组长度。 在英语中，“unshift”不是一个标准的单词，但我们可以将其拆解为“un-”和“shift”。其中：
阅读全文
posted @ 2024-01-31 14:29
龙陌
阅读(3960)
推荐(0)
摘要：
在软件发布中，"Canary" 版本指的是 Canary Channel、Canary Build 或 Canary Release，它通常是指一种高频率更新且可能包含最新（但未经充分测试）功能和改进的版本。 这种版本面向的是愿意接受较高风险并帮助开发者发现潜在问题的用户群体，比如开发者社区、早期尝
阅读全文
posted @ 2024-01-31 14:24
龙陌
阅读(1116)
推荐(0)
摘要：
React.ReactNode 和 React.ReactElement ,更推荐使用哪个？ 在React中，React.ReactNode 和 React.ReactElement 是不同类型，它们适用于不同的场景： React.ReactNode： 类型定义：type ReactNode = R
阅读全文
posted @ 2024-01-31 11:54
龙陌
阅读(1088)
推荐(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
龙陌
阅读(281)
推荐(0)
摘要：
axios实现，在一个极短时间内，请求同一个接口，若传参完全一样，则使用浏览器中的缓存中的上次的值。同时，上次的值应该在指定时间内可以自动清除。请写一个axios适配器。实现上述功能。 在axios中，我们可以利用浏览器的缓存机制（HTTP缓存）来实现这个需求。不过，浏览器的HTTP缓存主要依赖于服
阅读全文
posted @ 2024-01-30 12:07
龙陌
阅读(375)
推荐(0)
浙公网安备 33010602011771号