xxx

-- 引入 Turndown 库 -->

React 不会直接修改当前状态对象，而是创建一个新的状态对象，以确保不直接修改状态，从而遵循 React 的不可变性原则。父组件通过属性（props）将数据传递给子组件，子组件不可以直接修改这些数据，它们是只读的。：React 会将新生成的虚拟 DOM 树与之前的虚拟 DOM 树进行比较，找出两者之间的差异（所谓的变更集合）。：当父组件的 props 发生变化时，会触发子组件的重新渲染，子组件会接收新的 props。：当组件的状态（state）发生变化时，会触发组件的重新渲染，从而更新界面。

总结了几个很有意思的基础题目，分享一下。

这是为了解决异步操作（如数据请求或定时器）可能在组件卸载后仍然触发状态更新的常见问题，有助于处理异步操作和组件生命周期的常见问题的方式，确保组件卸载后不再更新状态，提高了代码的稳定性。在某些情况下，可能需要知道状态的历史值，例如，希望在状态变化时执行某些操作，但又需要访问上一个状态的值，以便进行比较或其他操作。：在进行数据请求时，如果请求返回数据需要更新组件的状态，但在请求期间用户可能离开当前页面或组件已卸载，为了避免在组件卸载后更新状态而导致错误，可以使用。会更新为前一个状态的值。

如果你的代码有跳出循环的操作，最好不要选择foreach循环。在JavaScript中的forEach循环中使用return语句,并不会退出或终止循环,forEach循环会继续执行完剩余的所有迭代。📢 这是一个难得的机会，不要错过！在我们的官方微信公众号上留下你的联系方式，我们的热情HR团队将尽快与你取得联系，提供内推支持。forEach循环中的return语句只会从当前的迭代回调函数中返回,而不会中断整个循环。：在爱数，我们秉承着开放、包容、创新的文化，努力激发每个员工的创造力，让我们一起塑造未来。

原文地址如下，有需要的朋友可以关注。

定位是一种相对于元素自身在正常文档流中的位置和祖先元素的滚动容器滚动的一种定位方式。是 CSS 中用于控制元素布局和定位的三个重要属性，它们之间有一定的关系和交互，但分别用于不同的布局和定位方式。元素在滚动容器内保持固定定位，直到滚动到达滚动容器的底部或顶部，或者直到它的容器边界，取决于滚动的方向。元素会相对于其最近的具有滚动条的祖先元素进行定位。定位的元素都脱离了文档流，不再占据正常的文档流位置，因此不会对其他元素的布局产生影响。属性来调整元素的位置，但元素在文档流中的位置不会改变，仍占据原来的空间。

使用透明边框的特性，通过控制边框的不透明部分来形成所需的三角形形状。通常，通过设置一个边框为透明，而将另一条边框的颜色设置为所需的颜色来实现这一点。这样设置的原因是为了创建一个类似于聊天应用中常见的聊天气泡效果，其中三角形指向用户头像或消息发送者的头像。属性来创建一个透明的矩形块，并利用边框的透明部分来形成三角形。使用透明边框的特性，通过控制边框的不透明部分来形成所需的扇形形状。为该元素设置一个适当的宽度和高度，以决定三角形的大小。为该元素设置一个适当的宽度和高度，以决定扇形的大小。元素，用于容纳三角形。

最常见的用法是将父组件中的内容插入到子组件中的特定位置，从而实现灵活的组件复用。例如，创建一个通用的模态框组件，然后通过插槽在不同情况下插入不同的标题和内容。

如果你的代码有跳出循环的操作，最好不要选择foreach循环。在JavaScript中的forEach循环中使用return语句,并不会退出或终止循环,forEach循环会继续执行完剩余的所有迭代。📢 这是一个难得的机会，不要错过！在我们的官方微信公众号上留下你的联系方式，我们的热情HR团队将尽快与你取得联系，提供内推支持。forEach循环中的return语句只会从当前的迭代回调函数中返回,而不会中断整个循环。：在爱数，我们秉承着开放、包容、创新的文化，努力激发每个员工的创造力，让我们一起塑造未来。

Vue 3.0引入了Tree-shaking特性，旨在优化构建过程并减小最终生成的代码大小。Tree-shaking是一种在构建时移除未使用代码的技术，通过分析模块的依赖关系，将没有被引用的部分从最终的打包文件中排除掉。这可以大大减少应用的体积，提高性能。举个通俗一点的例子：当我们开发一个应用程序时，会使用各种工具和库来帮助我们构建功能。有时候，这些工具和库可能比我们实际用到的东西要大很多，就像买了一个大箱子，但只用了里面一小部分。

React Portals（React 门户）是 React 提供的一种机制，用于将组件渲染到 DOM 树中的不同位置，而不受组件层次结构的限制。它允许你将一个组件的渲染内容“传送”到 DOM 结构中的任何位置，通常用于处理一些特殊的 UI 布局需求，如弹出窗口、模态框、通知框等。React Portals 的主要优势是它可以在组件树中的某一级组件上渲染内容，而不受该组件的父组件或祖先组件的影响。这在处理全局或跨层级的 UI 元素时非常有用，因为它不会破坏组件的层次结构。

不要在函数组件主体或 class 组件 render 方法中设置 ref,这可能导致 ref 不一致。输入的值通过状态state来控制,onChange 也会更新状态,所以组件受 React 的控制。函数组件没有实例,它的 ref 会在每次渲染时发生变化,可能导致奇怪的 bug。其值由 React 控制的组件,通常使用 state 来控制和修改组件的值。当ref挂载完成后,ref.current会指向对应的组件或DOM元素。当组件重新渲染时,ref 不会自动变化,需要在组件加载和卸载时手动更新。

当使用React编写应用程序时，可以使用JSX语法来描述用户界面的结构。JSX是一种类似于HTML的语法，但实际上它是一种JavaScript的扩展，用于定义React元素。React元素描述了我们想要在界面上看到的内容和结构。你使用JSX语法编写React组件的界面结构。JSX语法并不是浏览器原生支持的，所以需要使用工具将JSX代码转换为浏览器可识别的JavaScript代码。通常会使用Babel这样的工具来进行这种转换。是一个用于创建React元素的函数，它接受标签名、属性和子元素作为参数。

XSS（Cross-Site Scripting，跨站脚本攻击）是一种常见的网络安全漏洞，它允许攻击者在受害者的浏览器上执行恶意脚本。这种攻击通常发生在 web 应用程序中，攻击者通过注入恶意脚本来利用用户对网站的信任，从而在用户的浏览器上执行恶意操作。XSS 攻击可以分为三种主要类型：Stored (持久型) XSS 攻击： 攻击者将恶意脚本存储在服务器上，然后这些脚本被返回给用户，被用户浏览器解释并执行。常见的场景是在用户评论、留言板等地方注入恶意脚本，一旦其他用户访问这些内容，就可能受到攻击。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它的出现是为了解决 Web 应用中实时通信的需求。传统的 HTTP 协议是基于请求-响应模式的，即客户端发送请求，服务器响应请求，然后连接关闭。然而，有些场景需要保持长时间的连接，以实现实时性较高的数据交换，这就是 WebSocket 出现的背景。全双工通信：WebSocket 允许客户端和服务器在连接建立后双向传输数据，不像传统的 HTTP 请求-响应模式那样需要等待服务器的响应。持久连接。

性能优化这个问题，在面试的过程中问道的概率还挺大的，特别是对有前端开发经验的面试者来说，基本会被面试官问道关于性能优化的问题。但是在我们做项目的过程中，可能业务比较简单，并没有复杂到需要专门去优化的程度，复杂的业务呢，可能也优化不动。在被问到时可能会被问住（根本不需要优化…）。但是性能优化确实是值得关注的问题，并不是业务复杂到某种程度才去专门做优化。我觉得在平时的编码过程中有良好的习惯，时刻想着怎么写能更好一点，也能达到一种优化的作用。

当用户在网页上进行各种操作（例如点击、输入、滚动等）时，浏览器会生成相应的事件，使开发者能够捕获这些事件并执行特定的操作。当事件触发时，浏览器会创建一个事件对象，其中包含关于事件的信息。事件首先在最外层的父元素上触发捕获阶段的事件，然后再在目标元素上触发事件，最后在父元素上触发冒泡阶段的事件。是浏览器对象模型（BOM）中常用的功能，用于在预定的时间间隔执行一段代码。虽然不是严格的 BOM 对象，但它们是 Web Storage API 的一部分，在浏览器端存储键值对数据，分别在本地会话中和持久性存储中。

函数式编程是一种编程范式，它强调将计算过程视为数学函数的组合和转换，而不是通过改变状态和数据的操作来实现程序的功能。函数用于对数组的每个元素进行映射，生成一个新的数组，新数组的元素是根据映射函数返回的值。高阶函数是函数式编程中的一个重要概念，它指的是能够接受一个或多个函数作为参数，并且/或返回一个函数的函数。函数组合可以通过将一个函数的输出作为另一个函数的输入来实现，创建一系列操作的管道。高阶函数是接受一个或多个函数作为参数，并/或返回一个函数的函数。它们违反了纯函数的特性，因为它们改变了函数外部的状态。

层叠上下文（Stacking Context）是指在 HTML 和 CSS 中，用于控制和管理元素层叠顺序以及呈现的一种机制。在一个网页中，许多元素（例如文本、图像、背景等）可能会重叠在一起，这时候就需要一种方法来决定哪个元素应该显示在前面，哪个元素应该显示在后面。层叠上下文的原则是通过一系列的规则来确定元素的层叠顺序，这些规则可以根据元素的属性、内容、位置等来决定。每个层叠上下文都是一个独立的层叠环境，元素在不同的层叠上下文中可以相互叠加，但不会影响到其他上下文中的元素。

Fetch API 是一种现代的 JavaScript API，用于进行网络请求和处理响应数据。它提供了一种更简单和更灵活的方式来执行网络请求，取代了传统的 XMLHttpRequest（XHR）。Fetch API 使用 Promise 对象进行异步操作的处理。这使得处理异步操作变得更加直观和易于管理。Fetch API 的语法更加清晰和简洁，可以通过链式调用来定义请求的各个参数。Fetch API 允许您创建请求对象并设置请求头、请求方法、请求体等参数。

说到深浅拷贝就得提起JavaScript中的数据类型之前的文章中有介绍过，这里就不再细说了。浅拷贝：对基本数据类型进行值复制,对引用数据类型复制引用地址。浅拷贝会创建一个新对象,这个对象有着原始对象属性值的一份精确拷贝。如果拷贝的是像对象这样的引用对象,那么浅拷贝会复制引用指向堆内存地址,因此源对象和拷贝对象会共享属性。深拷贝：对基本数据类型进行值复制,对引用数据类型递归复制。深拷贝会另外创造一个一摸一样的对象,新对象跟原对象不共享内存,修改新对象不会改到原对象。// 原始对象a: 1,

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

内存泄漏是指程序中已经不再使用的内存却没有被正确释放或回收的情况。在编程中，当对象或数据不再被程序使用，但其所占用的内存空间没有被垃圾回收机制回收，就会导致内存泄漏。内存泄漏可能会导致程序的内存消耗不断增加，最终导致程序的性能下降、崩溃或不稳定。在长时间运行的应用中，内存泄漏可能会导致严重的问题，因此及早识别和修复内存泄漏是非常重要的。当程序使用了一些系统资源（如文件句柄、网络连接等），但在使用完后没有显式地释放这些资源，就会导致内存泄漏。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

如果你已经在使用 Class 组件，迁移到 Hooks 可能需要一些时间和努力。使用 Hooks 时，可以更容易地将逻辑进行拆分和组合，因为逻辑可以在不同的 Hook 中进行封装。Hooks 使得代码重用变得更加容易，可以将逻辑抽象为自定义的 Hook，然后在多个组件中共享。对于已经熟悉 Class 组件的开发者来说，学习和适应 Hooks 可能需要一些时间，因为需要重新学习一种新的编写风格和状态管理方式。在React中，有两种主要的方式来管理组件的状态和生命周期：Class 组件和 Hooks。

keep-alive” 是 Vue.js 中的一个特殊组件，用于缓存组件的状态，以提高应用性能。在 Vue.js 中，组件通常是动态创建和销毁的，当切换到另一个页面或组件时，之前的组件会被销毁，再次进入时会重新创建和初始化。这样可能导致组件的状态丢失，需要重新初始化，增加了资源的消耗。组件解决了这个问题，它可以将组件缓存起来，而不是销毁，使得组件在再次进入时保持之前的状态，以及避免重复的创建和初始化过程。这样可以大幅度提高组件的加载速度和性能。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

原文合集地址如下，有需要的朋友可以关注。

发布者-订阅者模式是一种软件设计模式，用于实现对象之间的一对多依赖关系。在这种模式中，一个对象（被称为发布者）而其他对象（成为订阅者）可以在发布者上注册自己，以接受特定事件或消息的通知。发布者： 负责维护订阅者列表和发布事件或消息。当某个事件或消息发生时，发布者将通知发送给所有订阅者。订阅者：注册在发布者上，以接受感兴趣的事件或消息的通知。当发布者发布相应事件时，订阅者相应做出响应。发布者维护一个订阅者列表，并提供注册、注销和通知的方法。

原文合集地址如下，有需要的朋友可以关注。

Token、Cookie 和 Session 都是在 Web 开发中用于身份认证和状态管理的重要概念。Token（令牌）：Token 是一种用于身份认证的轻量级凭证。在 Web 开发中，常见的身份认证方式是基于 Token 的身份验证。当用户登录时，服务器会生成一个唯一的 Token，并将其发送给客户端（通常是通过 HTTP 头或响应体）。客户端随后在每个后续请求中将 Token 放在请求头或其他适当位置，以证明其身份。