面试题汇总（3）前端优化手段好的，这里进一步详细介绍更多的前端优化手段，并包括 Vue 和 React 的具体代码优化

Fiber架构
React 的 Fiber 架构是对 React 核心算法的一次重写，旨在提高性能并为 React 应用提供更加灵活的更新机制。传统的 React 采用的是递归算法来更新组件树，而在 Fiber 架构中，React 采用了可中断的更新算法，使得渲染过程更加高效且可以被暂停、终止或继续。

Fiber 架构的背景与目标

传统的 React 使用同步的、递归的算法来遍历组件树并计算更新。然而，当组件树较大时，整个渲染过程可能会消耗较多的时间，导致浏览器无法响应用户输入，出现卡顿现象。为了避免这种性能问题，React 团队开发了 Fiber 架构，目标如下：

可中断的渲染：允许渲染过程被暂停、终止或在不同优先级之间切换，保证 React 应用对用户交互有更好的响应。
优先级调度：为不同类型的更新分配优先级，如用户交互的更新应当优先于后台数据处理的更新。
重用中间计算结果：通过保存中间结果，避免重复计算并提升效率。
细粒度的更新：将大的渲染任务拆分为小任务，使得每个任务可以在单个帧内完成，减少主线程阻塞。

Fiber 架构的核心概念

Fiber 节点：每个 Fiber 节点对应于一个 React 元素或组件。Fiber 架构的基础是构建一棵 Fiber 树，类似于传统的虚拟 DOM 树，但每个节点中包含更多的信息和任务控制。
- 工作单元 (Unit of Work)：每个 Fiber 节点是一个独立的工作单元，React 在每次更新时会遍历这些工作单元来确定哪些部分需要更新。
- 双缓存树 (Double Buffering)：React 会同时维护当前树和工作树，更新过程在工作树中进行，更新完成后再替换当前树。
更新的两个阶段：
- 调和阶段 (Reconciliation)：也叫“render”阶段。Fiber 会递归遍历组件树，找出需要更新的部分。这个阶段可以被打断。
- 提交阶段 (Commit)：一旦确定了需要更新的内容，React 会进行实际的 DOM 更新，这个阶段是同步的，不可被打断。
优先级调度： Fiber 架构允许对更新赋予不同的优先级，React 会根据任务的重要性来决定任务的执行顺序。主要的优先级有：
- Immediate（立即执行）：如用户输入事件，需要立刻响应。
- High（高优先级）：如动画。
- Normal（普通优先级）：一般的数据更新。
- Low（低优先级）：如数据预加载等。
可中断的任务： React 在 Fiber 架构下，可以将大的更新任务拆分为多个小任务，利用浏览器的空闲时间（通过 requestIdleCallback 或 requestAnimationFrame）执行更新任务，这样可以避免长时间占用主线程，保证浏览器的流畅响应。

Fiber 架构的工作机制

Fiber 的工作机制是将一个大的渲染任务拆分成小的“工作单元”。每次更新时，React 会从根节点开始，对每一个 Fiber 节点进行计算，决定是否需要更新。计算一个 Fiber 节点后，React 会根据当前的空闲时间判断是否继续处理下一个 Fiber 节点，或者将控制权交还给浏览器。

这个机制让 React 的渲染过程不再是同步阻塞的，可以在需要时暂停任务，优先处理更高优先级的任务，并且在空闲时继续处理剩余的任务。

Fiber 树结构

每个 Fiber 节点不仅包含与 React 组件相关的信息，还包含更新和任务管理的额外字段。
Fiber 树是双缓存结构：React 会在内存中同时维护两棵 Fiber 树，分别是 current tree（当前渲染的树）和 work-in-progress tree（正在工作的树）。
- 当更新开始时，React 会以当前 Fiber 树为基础，创建一个新的工作树，所有的更新操作都会在这棵树上进行。更新完成后，这棵工作树会替换当前树。

Fiber 和 Stack Reconciler 的区别

React 的传统递归算法被称为 Stack Reconciler，而 Fiber 是新一代架构。两者的主要区别包括：

Stack Reconciler 是同步的，递归遍历虚拟 DOM，无法中断，一旦开始更新整个树，必须完成所有任务才能结束。
Fiber 允许异步渲染，将渲染任务拆解成小的工作单元，可以暂停和继续，并根据任务优先级调度更新。

总结

Fiber 架构带来了更灵活、更高效的渲染过程，使 React 可以更好地处理复杂的应用场景，特别是在需要频繁更新和用户交互时。其核心优势在于：

可中断的渲染过程
支持任务优先级
细粒度的任务拆分与调度

React Fiber 提升了应用性能，使得 React 能够更平滑地处理大量组件更新，并且在响应用户交互时更加迅速。

CodeReview

前端代码审查（Code Review）是确保代码质量、提高团队协作效率和知识共享的关键过程。有效的 Code Review 需要考虑代码的可读性、性能、安全性、可维护性以及是否符合项目的编码规范。以下是如何进行前端 Code Review 的一些建议和最佳实践。

1. 理解代码变更的背景

理解需求：在审查代码之前，先确保你理解了所做更改的背景和目的。这包括功能需求、Bug修复、性能优化等。
阅读 PR 描述：开发者通常会在 Pull Request (PR) 或 Merge Request (MR) 中提供代码变更的描述，说明做了哪些更改以及为什么做这些更改。阅读这些描述可以帮助你快速了解代码的意图。

2. 审查代码的可读性

命名规范：变量、函数、组件等命名是否具有描述性，符合项目的命名规范。
代码结构：代码是否模块化，是否遵循单一职责原则，一个函数或组件是否只处理一件事情。
注释：是否有必要的注释解释复杂逻辑或不容易理解的代码部分，是否有多余的注释。
代码风格：代码是否遵循团队的代码风格指南，例如使用统一的缩进、空格、行尾符号等。

3. 审查代码的功能性

功能正确性：代码是否按照需求实现了预期的功能，是否有遗漏的部分。
边界情况：代码是否考虑了各种边界情况或异常输入，例如空值、错误格式的数据、极端情况等。
浏览器兼容性：代码是否考虑了多浏览器兼容性问题，是否在多个浏览器中进行了测试。
响应式设计：前端代码是否考虑了在不同屏幕尺寸上的显示效果，是否使用了合适的 CSS 媒体查询。

4. 审查代码的性能

DOM 操作：代码是否避免了不必要的 DOM 操作，尤其是在大型页面中，是否尽可能减少了重绘和回流。
数据处理：对于数据处理，是否有性能优化的考虑，例如大数据集的处理是否使用了分页、虚拟滚动等技术。
资源加载：是否考虑了懒加载图片、代码拆分等优化资源加载的方法。
渲染性能：在 React 等框架中，是否使用了 memo、useMemo、useCallback 等优化渲染性能，是否避免了不必要的组件重新渲染。

5. 审查代码的安全性

输入验证：是否有适当的输入验证，防止跨站脚本攻击（XSS）和其他注入攻击。
依赖安全：是否检查了代码中使用的第三方库是否有已知的安全漏洞，是否使用了安全版本的依赖。
身份验证和授权：在需要身份验证和授权的功能中，是否正确地处理了这些逻辑，防止未经授权的访问。

6. 审查代码的可维护性

可测试性：代码是否易于编写单元测试或集成测试，是否已经包含了相应的测试。
代码复用：是否有机会提取复用的代码，减少重复代码，提升代码的可维护性。
代码文档：是否有适当的文档说明代码的设计、使用方式以及注意事项，特别是在一些关键模块或复杂逻辑中。

7. 审查代码的兼容性和扩展性

向后兼容：代码变更是否考虑了向后兼容性，特别是在公共 API 或接口发生变化时。
扩展性：代码是否设计得足够灵活，未来的需求变更是否容易实现，是否考虑了代码的扩展性。

8. 提供建设性的反馈

具体问题：在指出问题时，尽量提供具体的示例，说明为什么这是一个问题以及如何改进。
鼓励优点：不仅要指出问题，也要表扬做得好的部分，这有助于提高团队士气。
提出建议而非命令：建议可以以问句或建议的形式提出，而不是命令或批评的语气，例如“你觉得使用 map 代替 for 循环会不会更好？”。

9. 沟通与协作

开放讨论：Code Review 是一个讨论的过程，而不是单方面的批评。审查者和开发者应该开放讨论，寻找最优解决方案。
考虑团队共识：在审查过程中，如果有意见分歧，应该参考团队的编码规范或共同决定的最佳实践，来达成共识。

总结

前端代码审查不仅是为了发现错误或优化代码，还涉及团队的协作、知识共享和代码质量的持续改进。通过严格的 Code Review，可以有效地提高代码质量、减少 Bug，并为团队成员提供学习和成长的机会。

前端优化手段

好的，这里进一步详细介绍更多的前端优化手段，并包括 Vue 和 React 的具体代码优化案例。

1. 打包优化

代码拆分 (Code Splitting)

目的：将应用程序代码分割成更小的块，按需加载，减少初始加载时间。

案例：

Vue：

// Vue 路由懒加载
const router = new VueRouter({
  routes: [
    {
      path: '/about',
      component: () => import('./components/About.vue')
    }
  ]
});

React：

// React 路由懒加载
import React, { Suspense, lazy } from 'react';
const About = lazy(() => import('./components/About'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Router>
        <Route path="/about" component={About} />
      </Router>
    </Suspense>
  );
}

Tree Shaking

目的：移除未使用的代码，减小打包文件的体积。

案例：

Webpack：

// Webpack 配置 Tree Shaking
optimization: {
  usedExports: true,
}

压缩与混淆

目的：通过压缩和混淆减少文件大小，提高加载速度。

案例：

Webpack：

// Webpack 配置 Terser 插件进行代码压缩
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

图片优化

目的：减小图片体积，提高加载速度。

案例：

使用工具如 TinyPNG 压缩图片

使用 srcset 和 sizes 实现响应式图片：

<img src="image.jpg" srcset="image-400.jpg 400w, image-800.jpg 800w" sizes="(max-width: 600px) 100vw, 50vw" alt="Optimized Image">

2. 代码优化

减少 DOM 操作

目的：减少频繁的 DOM 操作，避免重排和重绘，提高渲染性能。

案例：

Vue：

// 在 Vue 中使用虚拟 DOM 进行优化
computed: {
  filteredItems() {
    return this.items.filter(item => item.isActive);
  }
}

React：

// 在 React 中使用虚拟 DOM 进行优化
const FilteredList = ({ items }) => {
  return (
    <ul>
      {items.filter(item => item.isActive).map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

异步编程

目的：提高响应速度，避免阻塞 UI 线程。

案例：

Vue：

// 使用 async/await 处理异步操作
async mounted() {
  try {
    const response = await fetch('/api/data');
    this.data = await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

React：

// 使用 async/await 处理异步操作
useEffect(() => {
  async function fetchData() {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      setData(data);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  }
  fetchData();
}, []);

减少和合并请求

目的：减少 HTTP 请求数，降低网络开销。

案例：

将多个 CSS 文件合并成一个，使用工具如 Webpack 的 MiniCssExtractPlugin：

// 使用 MiniCssExtractPlugin 合并 CSS 文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  plugins: [new MiniCssExtractPlugin()],
};

3. 框架优化

懒加载组件

目的：按需加载组件，减少初始加载时间。

案例：

Vue：

// Vue 组件懒加载
const LazyComponent = () => import('./LazyComponent.vue');

React：

// React 组件懒加载
const LazyComponent = lazy(() => import('./LazyComponent'));

使用生产环境构建

目的：启用生产环境优化，禁用开发模式的调试功能。

案例：

Vue：

// Vue CLI 生产环境构建
if (process.env.NODE_ENV === 'production') {
  // 生产环境配置
}

React：

// React 生产环境构建
if (process.env.NODE_ENV === 'production') {
  // 生产环境配置
}

4. 网络优化

启用缓存

目的：利用浏览器缓存减少重复请求，提高加载速度。

案例：

Cache-Control: public, max-age=31536000

使用 CDN

目的：通过 Content Delivery Network（CDN）加速资源加载，减轻服务器压力。

案例：

<script src="https://cdn.example.com/lib.js"></script>

压缩和合并资源

目的：减少资源体积，加快下载速度。

案例：
```
Content-Encoding: gzip
```

HTTP/2

目的：通过多路复用、头部压缩等技术提高网络效率。

案例：

确保服务器和客户端支持 HTTP/2，启用 HTTP/2 特性。

5. 用户体验优化

使用进度指示器

目的：提供加载反馈，减少用户等待焦虑。

案例：

<!-- 使用简单的加载动画 -->
<div v-if="isLoading" class="loading-spinner"></div>

优化关键渲染路径

目的：缩短页面可交互时间，提高首屏加载速度。

案例：

<style>
  /* 关键 CSS 内联 */
  .critical-style { color: red; }
</style>

服务工作者 (Service Workers)

目的：实现离线功能和缓存管理，提高应用的可靠性和性能。

案例：

// 使用 Workbox 配置服务工作者
import { precacheAndRoute } from 'workbox-precaching';
precacheAndRoute(self.__WB_MANIFEST);

6. 其他优化手段

减少重排和重绘

目的：优化页面性能，避免频繁的重排和重绘。

案例：

使用 CSS 动画代替 JavaScript 动画。

避免频繁操作 DOM，使用文档碎片进行批量更新。

// 使用文档碎片进行批量更新
const fragment = document.createDocumentFragment();
items.forEach(item => {
  const li = document.createElement('li');
  li.textContent = item.name;
  fragment.appendChild(li);
});
document.getElementById('list').appendChild(fragment);

优化事件处理

目的：减少事件处理器的数量和频率，提高性能。

案例：

使用事件委托：

// 使用事件委托
document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target && event.target.matches('li.item')) {
    console.log('List item clicked');
  }
});

使用防抖 (Debounce) 和节流 (Throttle) 技术：

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function(...args) {
    const later = () => {
      clearTimeout(timeout);
      func.apply(this, args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}

// 节流函数
function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function() {
    const context = this;
    const args = arguments;
    if (!lastRan) {
      func.apply(context, args);
      lastRan = Date.now();
    } else {
      clearTimeout(lastFunc);
      lastFunc = setTimeout(function() {
        if ((Date.now() - lastRan) >= limit)

{ func.apply(context, args); lastRan = Date.now(); } }, limit - (Date.now() - lastRan)); } }; } ```

通过综合应用上述的优化手段，你可以显著提高 Web 应用的性能、用户体验和可靠性。

前端安全

前端安全涉及防范多种攻击手段，以下是一些常见的前端攻击手段及其防范措施：

跨站脚本攻击（XSS）：
- 攻击手段：攻击者通过注入恶意脚本，利用浏览器执行这些脚本，从而获取敏感信息、劫持用户会话等。
- 防范措施：
  - 对用户输入进行严格的输入验证和过滤。
  - 使用内容安全策略（CSP）来限制可以执行的脚本。
  - 使用安全的库和框架，避免直接操作 DOM。
跨站请求伪造（CSRF）：
- 攻击手段：攻击者诱导用户在已经登录的情况下访问特定的链接，导致用户无意中执行了恶意操作。
- 防范措施：
  - 在每个敏感操作请求中加入 CSRF 令牌。
  - 使用 HTTP 头中的 SameSite 属性限制 cookie 的发送范围。
  - 对关键操作进行双重验证，如确认对话框或二次身份验证。
SQL 注入：
- 攻击手段：通过向应用程序的输入字段注入恶意的 SQL 语句，攻击者可以访问和操纵数据库中的数据。
- 防范措施：
  - 使用参数化查询或预编译语句来处理数据库查询。
  - 对输入数据进行严格的验证和过滤。
点击劫持（Clickjacking）：
- 攻击手段：攻击者通过在透明的 iframe 中加载合法网站，诱导用户点击隐蔽的按钮或链接。
- 防范措施：
  - 使用 X-Frame-Options HTTP 头来防止页面被嵌入到 iframe 中。
  - 使用 CSP 的 frame-ancestors 指令来限制允许嵌入的来源。
本地存储攻击：
- 攻击手段：攻击者通过操控浏览器的本地存储、会话存储或 cookie 来窃取敏感信息或篡改数据。
- 防范措施：
  - 避免在本地存储中存储敏感信息，如身份验证令牌。
  - 使用 HTTP-only 和 Secure 属性来保护 cookie。
  - 定期清理和过期无效的数据。
开放重定向（Open Redirects）：
- 攻击手段：攻击者利用应用程序中的重定向功能，将用户引导至恶意网站。
- 防范措施：
  - 验证和限制重定向的目标 URL。
  - 使用白名单机制，允许重定向至可信的域名。

通过理解和防范这些常见的前端攻击手段，可以显著提升 Web 应用程序的安全性，保护用户数据和隐私。

Cookie的属性

Cookie 是存储在浏览器中的小型数据，HTTP 头和JavaScript都可以设置或读取。主要属性有：

Name：cookie 的名称。
Value：cookie 的值。
Domain：指定 cookie 的所属域名。例如，Domain=example.com 表示在 example.com 和所有子域名上都有效。
Path：指定 cookie 的有效路径。例如，Path=/ 表示在整个站点有效，Path=/subpath 表示仅在 /subpath 下有效。
Expires/Max-Age：设置 cookie 的有效期。Expires 用于指定过期日期（例如，Expires=Tue, 19 Jan 2038 03:14:07 GMT），Max-Age 用于指定 cookie 的存活时间（秒数，例如，Max-Age=3600 表示 1 小时）。
Secure：指定 cookie 仅在 HTTPS 连接中发送。
HttpOnly：指定 cookie 不能被 JavaScript 访问，防止跨站脚本攻击（XSS）。
SameSite：指定 cookie 的同站策略，防止跨站请求伪造（CSRF）攻击。值包括 Strict、Lax 和 None。

LocalStorage 和 SessionStorage 的区别

localStorage 和 sessionStorage 是 HTML5 Web 存储 API 的两个实现，用于在客户端存储数据。它们的区别包括：

存储时间：
- localStorage：数据存储在浏览器中，直到被显式删除，即使页面刷新或浏览器关闭，数据仍然存在。
- sessionStorage：数据仅在浏览器会话期间存储，页面刷新时仍然存在，但一旦浏览器或标签页关闭，数据就会被删除。
存储范围：
- localStorage：数据在同一域名下的所有页面之间共享。
- sessionStorage：数据仅在同一浏览器会话和同一标签页内共享，不同标签页间无法共享数据。
存储容量：
- localStorage 和 sessionStorage 的容量通常为 5MB，但不同浏览器可能有所不同。

HTTP 头中的 SameSite 属性

SameSite 是一种 cookie 属性，用于控制浏览器是否在跨站请求中发送 cookie，以防范跨站请求伪造（CSRF）攻击。主要取值包括：

Strict：完全限制第三方请求。只有在同一站点内的请求才会携带 cookie。即使从站点 A 导航到站点 B，站点 B 的 cookie 也不会被发送。
Lax：允许部分第三方请求携带 cookie，如导航请求（例如，链接点击）和 GET 请求，但不包括跨站点的 POST 请求。
None：在跨站请求中始终发送 cookie。需要同时设置 Secure 属性，保证 cookie 只能在 HTTPS 连接中发送。

通过设置 SameSite 属性，可以有效地减少 CSRF 攻击的风险，提高 Web 应用的安全性。

在 JavaScript 中，this 的指向在不同的上下文中会有所不同。理解 this 的指向对于编写和调试 JavaScript 代码至关重要。以下是一些常见场景及其对应的 this 指向：

1. 全局上下文

在全局执行上下文中（即在任何函数之外），this 指向全局对象：

在浏览器中，this 指向 window 对象。
在 Node.js 中，this 指向 global 对象。

console.log(this); // 在浏览器中，输出 window 对象

2. 函数调用

在普通函数中，this 默认指向全局对象（严格模式下为 undefined）：

function showThis() {
    console.log(this);
}
showThis(); // 在浏览器中，输出 window 对象

在严格模式下：

"use strict";
function showThis() {
    console.log(this);
}
showThis(); // 输出 undefined

3. 方法调用

当方法作为对象的属性调用时，this 指向该对象：

const obj = {
    name: 'Alice',
    getName: function() {
        console.log(this.name);
    }
};
obj.getName(); // 输出 'Alice'

4. 构造函数调用

在构造函数中，this 指向新创建的实例对象：

function Person(name) {
    this.name = name;
}
const person = new Person('Bob');
console.log(person.name); // 输出 'Bob'

5. 箭头函数

箭头函数不绑定自己的 this，它会捕获其所在上下文的 this 值：

const obj = {
    name: 'Carol',
    getName: function() {
        const inner = () => {
            console.log(this.name);
        };
        inner();
    }
};
obj.getName(); // 输出 'Carol'

6. `call`、`apply` 和 `bind` 方法

可以显式设置 this 的指向：

call 和 apply 立即调用函数，并指定 this 的值。
call 传递参数列表，apply 传递参数数组。
bind 返回一个新的函数，并永久绑定 this 的值。

function showName() {
    console.log(this.name);
}

const obj1 = { name: 'David' };
const obj2 = { name: 'Eve' };

showName.call(obj1); // 输出 'David'
showName.apply(obj2); // 输出 'Eve'

const boundShowName = showName.bind(obj1);
boundShowName(); // 输出 'David'

7. 事件处理器

在事件处理器中，this 指向触发事件的 DOM 元素：

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    console.log(this); // 输出按钮元素
});

但是，如果使用箭头函数，this 会保持其外部上下文的指向：

button.addEventListener('click', () => {
    console.log(this); // 输出全局对象或 undefined（严格模式下）
});

理解 this 的指向是编写和调试 JavaScript 代码的重要技能，掌握上述规则有助于更好地控制代码的执行上下文。

闭包陷阱

在 React 中，闭包陷阱（closure traps）是开发者常常会遇到的问题，尤其在使用函数组件和 hooks 时。这种陷阱主要表现为在函数组件的某些事件处理函数或 effect 中访问到的状态或 props 不如预期地更新，导致一些意外行为。以下是闭包陷阱的常见场景和解决方案：

问题场景

事件处理函数中的旧状态
- 在函数组件中，如果你定义了一个事件处理函数（如 onClick），并且这个处理函数依赖于某个状态变量，那么该处理函数可能会捕获该状态变量的旧值，即使状态已经更新，事件处理函数仍然使用的是旧值。
```
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log(count); // 可能会打印出旧的 count 值
    setCount(count + 1);
  };

  return <button onClick={handleClick}>Increment</button>;
}
```

useEffect 中的旧状态

当使用 useEffect 时，如果你在 effect 中使用了状态变量，但没有将其列入依赖数组中，那么 effect 中使用的状态值可能是旧的。

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // 可能会持续打印同一个 count 值
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖数组为空，count 可能不会更新

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

解决方案

使用函数式更新
- 对于状态更新，如果新状态依赖于前一个状态值，建议使用函数式更新，这样可以确保你访问到的是最新的状态。
```
const handleClick = () => {
  setCount(prevCount => prevCount + 1); // 使用函数式更新，确保 count 是最新的
};
```

正确设置 useEffect 的依赖

在使用 useEffect 时，确保所有依赖于状态或 props 的值都正确地列在依赖数组中。

useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // 现在 count 会正确更新
  }, 1000);

  return () => clearInterval(interval);
}, [count]); // 将 count 列入依赖数组

使用 useRef 持久化值

在某些情况下，如果你想避免频繁重建闭包，可以使用 useRef 持久化某个值，这样你就可以始终获取到最新的值。

function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 每次更新时同步 ref
  }, [count]);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(countRef.current); // 总是获取最新的 count 值
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖数组为空
}

总结

问题场景

事件处理函数中的旧状态
- 在函数组件中，如果你定义了一个事件处理函数（如 onClick），并且这个处理函数依赖于某个状态变量，那么该处理函数可能会捕获该状态变量的旧值，即使状态已经更新，事件处理函数仍然使用的是旧值。
```
function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    console.log(count); // 可能会打印出旧的 count 值
    setCount(count + 1);
  };

  return <button onClick={handleClick}>Increment</button>;
}
```

useEffect 中的旧状态

当使用 useEffect 时，如果你在 effect 中使用了状态变量，但没有将其列入依赖数组中，那么 effect 中使用的状态值可能是旧的。

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(count); // 可能会持续打印同一个 count 值
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖数组为空，count 可能不会更新

  return <button onClick={() => setCount(count + 1)}>Increment</button>;
}

解决方案

使用函数式更新
- 对于状态更新，如果新状态依赖于前一个状态值，建议使用函数式更新，这样可以确保你访问到的是最新的状态。
```
const handleClick = () => {
  setCount(prevCount => prevCount + 1); // 使用函数式更新，确保 count 是最新的
};
```

正确设置 useEffect 的依赖

在使用 useEffect 时，确保所有依赖于状态或 props 的值都正确地列在依赖数组中。

useEffect(() => {
  const interval = setInterval(() => {
    console.log(count); // 现在 count 会正确更新
  }, 1000);

  return () => clearInterval(interval);
}, [count]); // 将 count 列入依赖数组

使用 useRef 持久化值

在某些情况下，如果你想避免频繁重建闭包，可以使用 useRef 持久化某个值，这样你就可以始终获取到最新的值。

function Example() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);

  useEffect(() => {
    countRef.current = count; // 每次更新时同步 ref
  }, [count]);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log(countRef.current); // 总是获取最新的 count 值
    }, 1000);

    return () => clearInterval(interval);
  }, []); // 依赖数组为空
}

总结

闭包陷阱是 React 中比较常见的问题，理解函数组件的渲染过程和闭包的工作原理能够帮助避免这些问题。通过使用函数式更新、正确设置 useEffect 的依赖数组，或利用 useRef 来持久化状态，你可以有效地避免和解决这些闭包陷阱。

面试题汇总（3）

Fiber架构

Fiber 架构的背景与目标

Fiber 架构的核心概念

Fiber 架构的工作机制

Fiber 树结构

Fiber 和 Stack Reconciler 的区别

总结

CodeReview

1. 理解代码变更的背景

2. 审查代码的可读性

3. 审查代码的功能性

4. 审查代码的性能

5. 审查代码的安全性

6. 审查代码的可维护性

7. 审查代码的兼容性和扩展性

8. 提供建设性的反馈

9. 沟通与协作

总结

前端优化手段

1. 打包优化

代码拆分 (Code Splitting)

Tree Shaking

压缩与混淆

图片优化

2. 代码优化

减少 DOM 操作

异步编程

减少和合并请求

3. 框架优化

懒加载组件

使用生产环境构建

4. 网络优化

启用缓存

使用 CDN

压缩和合并资源

HTTP/2

5. 用户体验优化

使用进度指示器

优化关键渲染路径

服务工作者 (Service Workers)

6. 其他优化手段

减少重排和重绘

优化事件处理

前端安全

Cookie的属性

LocalStorage 和 SessionStorage 的区别

HTTP 头中的 SameSite 属性

1. 全局上下文

2. 函数调用

3. 方法调用

4. 构造函数调用

5. 箭头函数

6. call、apply 和 bind 方法

7. 事件处理器

闭包陷阱

问题场景

解决方案

总结

问题场景

解决方案

总结

6. `call`、`apply` 和 `bind` 方法