React报错之Too many re-renders

总览 产生"Too many re-renders. React limits the number of renders to prevent an infinite loop"错误有多方面的原因: 在一个组件的渲染方法中调用一个设置状态的函数。 立即调用一个事件处理器,而不是传递一个函数。 有一

React报错之Element type is invalid

总览 产生"Element type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got"错误有多个原因: 在导入组件时,将默

React报错之React.Children.only expected to receive single React element child

总览 当我们把多个子元素传递给一个只期望有一个React子元素的组件时,会产生"React.Children.only expected to receive single React element child"错误。为了解决该错误,将所有元素包装在一个React片段或一个封闭div中。 这里有个

3xx HTTP状态码的终极指南

前言 如果你在管理一些网站,那么对HTTP重定向的理解对于可靠的网站性能至关重要。在这篇文章中,我们将全面了解一下3xx HTTP状态码,从这里你可以了解它们是如何工作的,如何更好地管理它们,以及它们对SEO的影响。 HTTP重定向的目的 URL重定向涉及到一个网页地址被映射到另一个。网站需要重定向

Performance API不完全使用指北

本教程解释了如何使用Performance API来记录真实用户访问你的应用程序的统计数据。 使用浏览器的DevTools来评估web应用性能是很有用的,但要复现现实世界的使用情况并不容易。因为人们在不同地点使用不同的设备、浏览器和网络,都会有不同的体验。 Performance API介绍 Per

如何优化 Vue.js 应用程序

单页面应用(SPAs)当处理实时、异步数据时,可以提供丰富的、可交互的用户体验。但它们也可能很重,很臃肿,而且性能很差。在这篇文章中,我们将介绍一些前端优化技巧,以保持我们的Vue应用程序相对精简,并且只在需要的时候提供必需的JS。 注意:这里假设你对Vue和Composition API有一定的熟

JavaScript 如何验证 URL

前言 当开发者需要为不同目的以不同形式处理URL时,比如说浏览器历史导航,锚点目标,查询参数等等,我们经常会借助于JavaScript。然而,它的频繁使用促使攻击者利用其漏洞。这种被利用的风险是我们必须在我们的JavaScript应用程序中实现URL验证的原因。 URL验证检查URL是否遵循正确的U

面向对象编程

在编写软件时,你所做的大部分工作就是创建和连接多个值和方法,让他们一起工作,以便提供应用程序的功能。面向对象编程可以帮助你更容易地,并且是声明式地实现这些功能。 在这篇文章中,你将了解到在JavaScript中开始使用类和面向对象编程方法所需要的一切。 前置知识 在阅读本篇文章之前,你需要掌握Jav

使用 Vue 3 时应避免的 10 个错误

Vue 3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它,其他人最终都将不得不迁移到Vue 3。我现在有机会使用它并记录了我的错误,下面这些错误你可能想要避免。 使用Reactive声明原始值 数据声明在过去都是非常直接的,但是现在有很多帮助函数供我们使用。目前的规则是: 使用react

如何移除事件监听器

在运行时清理你的代码是构建高效、可预测的应用程序,没有商量余地的部分。在JavaScript中,实现这一目标的方法之一是很好地管理事件监听器,尤其是当不再需要时移除它们。 有好几种方法可以做到这件事情,每种都有自己的一套权衡方法,使其在某些情况下更合适。我们将介绍几种最常用的策略,以及当你试图决定哪

处理尚不存在的 DOM 节点

探索 MutationObserver API 与传统轮询等待最终被创建的节点方法相比的优劣。 有时候,您需要操作尚未存在的 DOM 的某个部分。 出现这种需求的原因有很多,但你最常看到的是在处理第三方脚本时,这些脚本会异步地将标记注入页面。举个例子,我最近需要在用户关闭Google reCAPTC

你需要知道的Symbols

著名symbol 著名symbol是一个在不同领域中都相同且未注册的symbol。如果我们要列出著名symbol,它们会是: Symbol.iterator Symbol.toStringTag Symbol.toPrimitive Symbol.asyncIterator Symbol.hasIn

在 Vue 中控制表单输入

Vue中v-model的思路很简单。定义一个可响应式的text(通常是一个ref),然后用v-model="text"将这个值绑定到一个input上。这就创造了一个双向的数据流: 用户在输入框中输入,text会发生变化。 text发生变化,输入框的值也随之变化。 让我们看看如何在Vue 3中使用v-

如何在2023年学习React

在2023年学习React并不是一件容易的事情。自2019年React Hooks发布以来,我们已经拥有了很多稳定性,但现在形势正在再次变化。而这次变化可能比使用React Hooks时更加不稳定。在本文中,我想比较两种学习React的方式:以库的方式和以框架的方式。 为了让事情更加清晰:React

使用Ref还是Reactive?

我喜欢Vue 3的Composition API,它提供了两种方法来为Vue组件添加响应式状态:ref和reactive。当你使用ref时到处使用.value是很麻烦的,但当你用reactive创建的响应式对象进行重构时,也很容易丢失响应性。 在这篇文章中,我将阐释你如何来选择reactive以及r

JavaScript中的四种枚举方式

字符串和数字具有无数个值,而其他类型如布尔值则是有限的集合。 一周的日子(星期一,星期二,...,星期日),一年的季节(冬季,春季,夏季,秋季)和基本方向(北,东,南,西)都是具有有限值集合的例子。 当一个变量有一个来自有限的预定义常量的值时,使用枚举是很方便的。枚举使你不必使用魔法数字和字符串(这

从零开始使用 Astro 的实用指南

在这个实用的Astro指南中,我将指导你完成设置过程,并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件,甚至是markdown文章。我还会告诉你如何从服务器上获取数据,创建布局,并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣,因为我们将一起创建一个

如何使用Map处理Dom节点

本文浅析一下为什么`Map`(和WeakMap)在处理大量DOM节点时特别有用。 我们在JavaScript中使用了很多普通的、古老的对象来存储键/值数据,它们处理的非常出色: ```jsx const person = { firstName: 'Alex', lastName: 'MacArth

有JSDoc还需要TypeScript吗

这听起来是不是很耳熟:你想写一个小型脚本,不管是为页面、命令行工具,还是其他什么类型。你从JavaScript开始,直到你想起写代码时没有类型是多么痛苦。所以你把文件从`.js`重命名为`.ts`。然后意识到你已经打开了一个麻烦的玩意儿。 如果你在为一个网站或一个库写代码,你就需要引入编译的步骤。如

如何在2023年开启React项目

在这里,我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点,反思一下作为一个开发者所需要的技术水平,反思一下作为一个React开发者,每个启动项目都能为你提供哪些功能。最后,你将了解到针对不同需求的3种解决方案。 **免责声明**:从个人开发者的角度来看,我完全支持React团队在