02 2024 档案
发表于 2024-02-28 16:11阅读:292评论:0推荐:0
摘要:a ?? b 和 a || b 都可以用于提供默认值,但它们之间存在关键的区别: Nullish Coalescing Operator (??): 只有当 a 的值为 null 或 undefined 时,才会返回 b。 如果 a 是其他假值(如 false、0、NaN、空字符串),a ?? b
阅读全文 »
发表于 2024-02-28 00:31阅读:527评论:0推荐:0
摘要:merge 是 lodash 中的一个函数,用于将多个对象合并成一个新对象。它的用法如下: _.merge(object, [sources]) 其中,object 是目标对象,sources 是一个或多个源对象,它们的属性将被合并到目标对象中。如果源对象和目标对象有相同的属性名,则源对象中的属性值
阅读全文 »
发表于 2024-02-27 23:58阅读:608评论:0推荐:0
摘要:sortBy 是 lodash 中的一个函数,用于对数组或对象进行排序。它的用法如下: _.sortBy(collection, [iteratees=[_.identity]]) 其中,collection 是要排序的数组或对象,iteratees 是一个可选参数,用于指定排序的规则。如果不传入
阅读全文 »
发表于 2024-02-27 23:44阅读:364评论:0推荐:0
摘要:pickBy 是 lodash 中的一个函数,其作用是过滤对象中的属性,只保留符合条件的属性。它的用法如下: _.pickBy(object, [predicate=_.identity]) 其中,object 是要过滤的对象,predicate 是一个可选的函数,用于定义过滤条件。如果没有传入 p
阅读全文 »
发表于 2024-02-27 20:17阅读:159评论:0推荐:0
摘要:在软件开发中,SWR 是 " stale-while-revalidate " 的首字母缩写,这是一种在网络应用(尤其是Web应用)中用于数据获取和缓存的策略。 这个策略最早由 Next.js 团队提出并在其数据获取库 next/swr 中实现了这个思想。 SWR 的工作原理如下: 立即使用缓存数据
阅读全文 »
发表于 2024-02-26 18:54阅读:163评论:0推荐:0
摘要:枚举的位运算 在枚举中,可以使用位运算符来对枚举值进行位运算操作。位运算是一种对二进制数进行操作的方式,它可以对枚举值的各个位进行逻辑运算,从而实现一些特定的功能。 以下是常用的位运算符及其功能: 按位与(&):将两个操作数的每个对应位进行与运算,结果中每个位都是两个操作数对应位上都为1时才为1,否
阅读全文 »
发表于 2024-02-26 18:52阅读:61评论:0推荐:0
摘要:在typescript项目中什么场景适合定义枚举值,什么场景适合定义常量类 在 TypeScript 中,枚举(enum)和常量类(通常是带有只读属性的类)都有其适用场景: 适合定义枚举值的场景: 有限且命名的集合: 当你需要表示一组固定的、可枚举的值,并且每个值都有一个明确的名字时,使用枚举类型是
阅读全文 »
发表于 2024-02-25 14:33阅读:52评论:0推荐:0
摘要:依赖注入 render props 其实就是 React 世界中的 “依赖注入”(Dependency Injection)。 所谓依赖注入,指的是解决这样一个问题: 逻辑 A 依赖于逻辑 B,如果让 A 直接依赖于 B,当然可行,但是 A 就没法做得通用了。 依赖注入就是把 B 的逻辑以函数形式传
阅读全文 »
发表于 2024-02-25 14:23阅读:792评论:0推荐:0
摘要:如果组件中多次使用 useState 怎么办?React 如何“记住”哪个状态对应哪个变量? React 是完全根据 useState 的调用顺序来“记住”状态归属的,假设组件代码如下: const Counter = () => { const [count, setCount] = useSta
阅读全文 »
发表于 2024-02-25 10:35阅读:84评论:0推荐:0
摘要:在 TypeScript 中,定义子组件的 props 通常有以下两种方式: 接口(Interface): // 定义一个接口来描述 Props interface MyComponentProps { title: string; items: string[]; onItemSelected:
阅读全文 »
发表于 2024-02-25 10:04阅读:121评论:0推荐:0
摘要:在使用了 TypeScript 的 React 项目中,由于 TypeScript 已经提供了静态类型检查的能力,通常不需要再额外使用 prop-types 库进行运行时的类型检查。 TypeScript 在编译阶段就能通过类型注解确保组件之间的 props 类型正确无误,这有助于在开发阶段就发现类
阅读全文 »
发表于 2024-02-21 17:10阅读:198评论:0推荐:0
摘要:/* istanbul ignore next */ 是一个针对 Istanbul(或其后续项目 nyc)代码覆盖率工具的特殊注释。 当这个注释出现在 JavaScript 代码中,它指示 Istanbul 在生成代码覆盖率报告时忽略紧跟在该注释之后的一行或多行代码。 Istanbul 是一个流行的
阅读全文 »
发表于 2024-02-21 17:06阅读:6评论:0推荐:0
摘要:import { flattenKeys } from '.'; 这行代码是从当前目录(current directory)导入名为 flattenKeys 的函数或变量。 在Node.js项目中,. 表示当前目录的入口文件,通常是 index.js 或者与当前文件在同一目录下的其他导出模块。 这意
阅读全文 »
发表于 2024-02-21 14:43阅读:17评论:0推荐:0
摘要:(ColumnTypes[number] & { editable?: boolean; dataIndex: string; })[] 在TypeScript中,这段类型定义可以分解理解: ColumnTypes[number]:首先,如果 ColumnTypes 是一个数组类型(如 Column
阅读全文 »
发表于 2024-02-21 14:39阅读:24评论:0推荐:0
摘要:在TypeScript中,Exclude<T, U> 是一个内置的类型操作符,它的作用是从联合类型 T 中排除那些与类型 U 相匹配的类型。 这里的 EditableTableProps["columns"] 表示从 EditableTableProps 这个接口或类型中提取 columns 属性的
阅读全文 »
发表于 2024-02-21 14:36阅读:168评论:0推荐:0
摘要:在TypeScript中,Parameters<T>是一个类型操作符,它会提取函数类型T的参数类型作为一个元组(tuple)类型。这里的 typeof Table 指的是获取名为 Table 的构造函数或函数类型的类型。 如果 Table 是一个类或函数,那么 Parameters<typeof T
阅读全文 »
发表于 2024-02-20 14:42阅读:422评论:0推荐:0
摘要:提交代码注释率通常是指在开发人员提交的代码中,注释行数占总代码行数的比例。 这是一个衡量代码质量、可读性以及团队规范的重要指标之一。 注释不仅应该包括函数或方法的目的和用法,还应涵盖复杂逻辑、异常处理、设计决策等关键信息。 理想的注释率为多少并没有统一的标准,但一般来说,注释应该足够清晰明了,让其他
阅读全文 »
发表于 2024-02-19 20:07阅读:214评论:0推荐:0
摘要:JavaScript 内置的 Number 类型在处理浮点数时的精度问题主要是由以下原因造成的: IEEE 754 浮点数标准: JavaScript 中的数字是基于 IEEE 754 标准实现的双精度浮点数(64位),其中: 最高1位为符号位(0表示正数,1表示负数)。 接下来的11位用于存储指数
阅读全文 »
发表于 2024-02-07 15:42阅读:85评论:0推荐:0
摘要:useEffect 传入的函数,它的返回值要么是一个方法(清理函数),要么就是undefined,其他情况都会报错 比较常见的一个情况是,我们的 useEffect 需要执行一个 async 函数,比如: // ❌ // Type 'Promise<void>' provides no match
阅读全文 »
发表于 2024-02-07 15:27阅读:140评论:0推荐:0
摘要:在 react-dnd 这个库中,"dnd" 是 "Drag and Drop" 的缩写,表示拖拽与放置(拖放)功能。 react-dnd 是一个用于 React 应用程序的强大的拖放库,它允许开发者轻松地在 React 组件之间实现拖放交互功能,从而提升用户界面的互动性和用户体验。 通过使用 re
阅读全文 »
发表于 2024-02-07 11:38阅读:1160评论:0推荐:0
摘要:global.d.ts 文件在 TypeScript 项目中是一个全局声明文件,它的作用是为全局范围内的变量、函数或其他类型提供类型定义。 这个文件中的声明可以让TypeScript编译器知道那些在运行时存在的、但未包含在任何模块中的全局变量和函数等。 例如,在浏览器环境中,一些全局对象如 wind
阅读全文 »
发表于 2024-02-07 10:59阅读:252评论:0推荐:0
摘要:在前端开发时,当需要将用户输入或者动态生成的字符串作为URL的一部分(特别是查询参数或路径片段)发送到服务器时,应当使用 encodeURIComponent 函数对字符串进行编码。 以下是一些具体场景: 查询参数: 当你在URL中添加查询参数(query parameters),例如通过 ?key
阅读全文 »
发表于 2024-02-06 16:35阅读:17评论:0推荐:0
摘要:isOfType 是一个类型保护函数,它用于在运行时检查传入的变量是否具有指定类型的特定属性。以下是对这个方法的设计和使用文档的描述: 设计 export const isOfType = <T>( varToBeChecked: any, propertyToCheckFor: keyof T )
阅读全文 »
发表于 2024-02-06 15:58阅读:306评论:0推荐:0
摘要:在现代前端项目中,特别是在使用webpack等构建工具时,~@ 是一种约定的写法,用于处理模块化的CSS或预处理器(如Less、Sass)文件的导入。 这里的 ~@/commonStyles/index.less 表示: ~ 符号:在一些构建系统中(尤其是webpack),此符号告诉构建工具这是一个
阅读全文 »
发表于 2024-02-06 14:31阅读:31评论:0推荐:0
摘要:在TypeScript中,Omit<T, K>是一个内置的实用类型(从TypeScript 3.5版本开始提供),用于创建一个新的类型,该类型包含了原始类型T的所有属性,但排除了指定的键K。 其定义如下: type Omit<T, K extends keyof any> = Pick<T, Exc
阅读全文 »
发表于 2024-02-06 13:37阅读:22评论:0推荐:0
摘要:弹窗组件(Modal)是否需要使用记忆化(memoization),主要取决于该组件的性能优化需求以及其内部复杂性。记忆化是一种用于优化函数或组件性能的技术,它通过缓存先前计算的结果以避免在相同的输入参数下重复执行耗时的操作。 对于一个简单的弹窗组件而言,如果其内容不涉及复杂的计算或者大量数据处理,
阅读全文 »
发表于 2024-02-05 20:45阅读:509评论:0推荐:0
摘要:"resolutions": { "es6-iterator//es5-ext": "0.10.50", "d//es5-ext": "0.10.50", "es5-ext": "0.10.50" } 这个是什么意思? 这段配置是出现在 package.json 文件中的 "resolutions"
阅读全文 »
发表于 2024-02-05 20:37阅读:71评论:0推荐:0
摘要:React中的错误边界处理是指的哪些? 在React中,错误边界(Error Boundaries)是一种React组件,它能够捕获并处理其子组件树任何位置上抛出的JavaScript错误,并且阻止这些错误导致整个应用崩溃。当一个错误边界内的子组件发生渲染错误、生命周期方法中的错误或其他同步错误时,
阅读全文 »
发表于 2024-02-05 20:29阅读:10评论:0推荐:0
摘要:ARIA 创作实践指南 (APG) https://www.w3.org/WAI/ARIA/apg/
阅读全文 »
发表于 2024-02-05 19:39阅读:43评论:0推荐:1
摘要:在React中,命令式行为通常指的是那些直接操作DOM或修改数据源而不通过React的声明式机制(如setState、useState Hook等)的操作。React的核心理念是声明式编程,它鼓励开发者描述UI应该是什么样子,而不是如何改变它。 命令式行为示例包括: 直接操作DOM: 使用原生Jav
阅读全文 »
发表于 2024-02-05 19:38阅读:35评论:0推荐:0
摘要:命令式句柄(imperative handle)是什么意思? 在计算机科学中,特别是在图形用户界面(GUI)和某些编程语言的上下文中,“命令式句柄”通常指的是对某个对象或资源的一种间接引用。 它是一个特殊的标识符,用于操作对象而不直接访问对象本身。 例如,在Windows API编程中,句柄(Han
阅读全文 »
发表于 2024-02-05 11:56阅读:43评论:0推荐:0
摘要:你不应该从一个 Model 组件暴露出 {open, close} 这样的命令式句柄,最好是像 这样,将 isOpen 作为一个 prop。为什么这样要求? 在React和现代UI开发中,遵循声明式编程范式通常被认为是一种最佳实践。暴露命令式的句柄(如open和close方法)会导致组件之间产生更紧
阅读全文 »
发表于 2024-02-05 11:05阅读:119评论:0推荐:0
摘要:在 Effect 中直接请求数据很容易导致“网络瀑布”。当你渲染父组件时,它会请求一些数据,再渲染子组件,然后重复这样的过程来请求子组件的数据。 如果网络不是很快,这将比并行请求所有数据要慢得多。 如何理解? 在React中,当我们在Effect(例如useEffect Hook)中直接请求数据时,
阅读全文 »
发表于 2024-02-05 09:33阅读:231评论:0推荐:0
摘要:Vue.js中,当在单文件组件(.vue 文件)的 <style> 标签上使用 scoped 属性时,Vue Loader 会为组件中的 CSS 添加一个唯一的属性选择器,以确保样式只作用于当前组件内的元素。这个独特的属性通常格式为 data-v-xxx,其中 xxx 是一个根据文件内容和路径生成的
阅读全文 »
发表于 2024-02-04 18:59阅读:1104评论:0推荐:0
摘要:Yarn 本身设计时就考虑到了并行安装依赖以提高速度,它默认使用多线程来下载和安装包。当执行 yarn install 时,Yarn 会利用所有可用的CPU核心,并通过其内部的并行化机制来加速安装过程。 如果你发现 Yarn 在安装依赖时仍然显得较慢,可以尝试以下方法来优化: 启用网络代理: 如果你
阅读全文 »
发表于 2024-02-04 10:52阅读:410评论:0推荐:1
摘要:编写一份前端页面性能分析报告,需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架: 一、前言 目的:简述报告的目的,比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。 范围:明确分析涉及的页面及其版本信息,以及使用的设备类型、浏览器版本和网络条
阅读全文 »
发表于 2024-02-04 10:18阅读:16评论:0推荐:0
摘要:"与事件处理程序不同,事件处理程序只在每次交互时运行一次,而 Effect 则在需要进行同步时运行。" 但是 交互往往会同时触发事件处理,从而引起值变化,进而导致同步,从而运行Effect,不是吗? 那么如何确定方法应该写在事件处理里还是Effect里面?? 事件处理程序(Event Handler
阅读全文 »
发表于 2024-02-04 09:57阅读:2292评论:0推荐:0
摘要:aria-label的作用是什么? aria-label 属性在网页无障碍(Web Accessibility,简称A11Y)中扮演着至关重要的角色。其主要作用如下: 提供非视觉提示:aria-label 用于为HTML元素提供一个简短、明确的文本描述,这个描述不会在页面上显示出来,但会被屏幕阅读器
阅读全文 »
发表于 2024-02-02 16:59阅读:247评论:0推荐:0
摘要:Vue.js 和 React 在实现响应式原理上有所不同: Vue.js 的响应式机制: 依赖收集(Dependent Data Collection): Vue 使用了基于 getter/setter 的 Object.defineProperty() 方法,对数据对象的属性进行拦截。当一个组件渲
阅读全文 »
发表于 2024-02-01 09:53阅读:2476评论:0推荐:0
摘要:npm disturl 是做什么用的? npm disturl 是一个配置项,用于设置npm下载tarball包(通常是Node.js的二进制文件或者一些带有平台相关编译内容的npm模块)时的基础URL。当npm需要从源代码构建依赖项,并且这些依赖项包含需要从特定位置下载的预编译二进制文件时,它会使
阅读全文 »