面试题汇总（2）

太平洋有多大
53 阅读45分钟

  • 使用 Service Workers 来缓存静态资源和接口数据

使用 Service Workers 来缓存静态资源和接口数据，可以显著减少后续页面加载时间，提高应用的性能和用户体验。以下是详细的步骤和示例代码：

1. 注册 Service Worker

在你的主 JavaScript 文件中（例如 app.js），注册 Service Worker：

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js').then(registration => {
      console.log('Service Worker registered with scope:', registration.scope);
    }).catch(error => {
      console.error('Service Worker registration failed:', error);
    });
  });
}

2. 编写 Service Worker 文件

在你的项目根目录下创建一个名为 service-worker.js 的文件，包含以下内容：

const CACHE_NAME = 'my-cache-v1';
const urlsToCache = [
  '/',
  '/index.html',
  '/styles.css',
  '/app.js',
  '/image.png'
];

// 安装事件：打开缓存并缓存资源
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log('Opened cache');
      return cache.addAll(urlsToCache);
    })
  );
});

// 激活事件：清除旧的缓存
self.addEventListener('activate', event => {
  const cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// 拦截网络请求
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // 如果缓存中有匹配的响应，则返回缓存的响应
      if (response) {
        return response;
      }

      // 否则，进行网络请求并将响应加入缓存
      return fetch(event.request).then(networkResponse => {
        if (!networkResponse || networkResponse.status !== 200 || networkResponse.type !== 'basic') {
          return networkResponse;
        }

        const responseToCache = networkResponse.clone();
        caches.open(CACHE_NAME).then(cache => {
          cache.put(event.request, responseToCache);
        });

        return networkResponse;
      });
    }).catch(() => {
      // 当请求失败时，可以返回一个默认的离线页面
      return caches.match('/offline.html');
    })
  );
});

3. 缓存接口数据

你可以在 fetch 事件中添加条件来区分静态资源和 API 请求，并缓存 API 响应数据。例如：

self.addEventListener('fetch', event => {
  if (event.request.url.includes('/api/')) {
    event.respondWith(
      caches.open(CACHE_NAME).then(cache => {
        return fetch(event.request).then(response => {
          if (response.status === 200) {
            cache.put(event.request.url, response.clone());
          }
          return response;
        }).catch(() => {
          return caches.match(event.request);
        });
      })
    );
  } else {
    event.respondWith(
      caches.match(event.request).then(response => {
        return response || fetch(event.request).then(response => {
          return caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, response.clone());
            return response;
          });
        });
      })
    );
  }
});

4. 更新缓存的策略

可以根据项目需求选择不同的缓存策略，如：

  • Cache First：优先使用缓存，缓存不存在时再发起网络请求。
  • Network First：优先使用网络请求，失败时使用缓存。
  • Stale-While-Revalidate：使用缓存的同时，发起网络请求更新缓存。

示例：Stale-While-Revalidate

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.open(CACHE_NAME).then(cache => {
      return cache.match(event.request).then(response => {
        const fetchPromise = fetch(event.request).then(networkResponse => {
          if (networkResponse.status === 200) {
            cache.put(event.request, networkResponse.clone());
          }
          return networkResponse;
        });
        return response || fetchPromise;
      });
    })
  );
});

通过这些步骤，你可以使用 Service Workers 有效缓存静态资源和接口数据，显著提升应用的性能和用户体验。

  • https

HTTPS（HyperText Transfer Protocol Secure）是一种安全的通信协议，用于在计算机网络上安全地传输数据。它是 HTTP（HyperText Transfer Protocol）的扩展，结合了 SSL（Secure Sockets Layer）/TLS（Transport Layer Security）来加密通信，以保护数据的机密性和完整性。以下是对 HTTPS 的详细讲解：

1. HTTPS 的工作原理

a. HTTP 与 HTTPS 的区别

  • HTTP: 数据在客户端和服务器之间以明文形式传输，容易被中间人拦截和篡改。
  • HTTPS: 在 HTTP 基础上增加了 SSL/TLS 层，对数据进行加密，确保通信的安全性。

b. 加密机制

HTTPS 使用对称加密和非对称加密相结合的方式来保证通信安全：

  1. 非对称加密: 用于交换对称加密密钥。客户端和服务器各自持有一对公钥和私钥。
  2. 对称加密: 用于实际数据的传输，加密和解密使用相同的密钥。

c. HTTPS 连接建立过程（TLS 握手）

  1. 客户端发起请求: 客户端向服务器发起 HTTPS 连接请求。
  2. 服务器响应: 服务器返回其 SSL/TLS 证书，其中包含公钥和其他身份信息。
  3. 验证证书: 客户端验证服务器证书的合法性（证书颁发机构 CA 签名和域名匹配）。
  4. 生成对称密钥: 客户端生成一个对称加密密钥，并使用服务器的公钥加密该密钥，然后发送给服务器。
  5. 建立加密通信: 服务器使用私钥解密对称密钥，双方使用该对称密钥进行加密通信。

2. HTTPS 的优点

  1. 数据加密: 数据在传输过程中被加密，防止被窃取。
  2. 数据完整性: 防止数据在传输过程中被篡改。
  3. 身份验证: 通过证书验证服务器身份，防止中间人攻击。
  4. 隐私保护: 用户访问的内容不会被窥探，保护用户隐私。

3. HTTPS 证书

a. 类型

  • DV (Domain Validation) 证书: 仅验证域名所有权，适用于小型网站。
  • OV (Organization Validation) 证书: 验证域名所有权和组织身份，适用于中型网站和企业。
  • EV (Extended Validation) 证书: 严格验证域名所有权和组织身份，浏览器地址栏显示绿色，适用于大型网站和金融机构。

b. 获取证书

证书由受信任的证书颁发机构（CA）颁发，如 Let's Encrypt、DigiCert、Symantec 等。

4. 实现 HTTPS

a. 配置 HTTPS

  1. 获取证书: 从 CA 处申请并获取 SSL/TLS 证书。
  2. 服务器配置: 在 Web 服务器（如 Apache、Nginx）上配置证书和密钥。
  3. 强制 HTTPS: 配置服务器重定向 HTTP 请求到 HTTPS。

b. 示例（Nginx 配置）

server {
    listen 80;
    server_name example.com www.example.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name example.com www.example.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/cert.key;

    location / {
        proxy_pass http://localhost:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

5. 常见问题和解决方法

  1. 证书过期: 定期更新证书，使用自动化工具（如 Certbot）自动续期。
  2. 中间人攻击: 使用强大的证书和安全协议版本（如 TLS 1.2 或以上）。
  3. 性能问题: 使用 HTTP/2，启用会话复用和缓存。

6. 未来的发展

  • TLS 1.3: 提供更好的性能和安全性。
  • 普及化: 越来越多的网站和服务转向 HTTPS。
  • 浏览器支持: 浏览器逐渐对非 HTTPS 网站显示不安全警告，推动 HTTPS 的普及。

HTTPS 是确保 Web 安全的关键技术，通过加密通信、验证身份和保护数据完整性，有效提升了用户的在线安全体验。

HTTPS 的认证过程通过 SSL/TLS 协议来完成，主要包括证书的验证和身份的确认。以下是 HTTPS 认证过程的详细步骤：

1. HTTPS 连接建立

HTTPS 连接的建立过程称为 TLS 握手，包含以下几个步骤：

1.1 客户端发送请求

客户端（通常是浏览器）向服务器发送一个 HTTPS 请求，包含以下信息：

  • 客户端支持的协议版本（例如 TLS 1.2 或 TLS 1.3）
  • 客户端支持的加密算法
  • 客户端生成的随机数，用于后续生成对称密钥

1.2 服务器响应

服务器收到请求后，返回以下信息：

  • 服务器的 SSL/TLS 证书
  • 服务器支持的协议版本
  • 服务器支持的加密算法
  • 服务器生成的随机数

2. 证书验证

客户端收到服务器的响应后，会验证服务器提供的 SSL/TLS 证书。证书验证过程如下：

2.1 检查证书有效期

客户端检查证书的有效期，确保证书在当前时间内是有效的。

2.2 验证证书链

客户端验证证书的签名，确保证书是由受信任的证书颁发机构（CA）签发的。这个过程涉及检查证书链，验证从服务器证书到根证书的一系列中间证书的有效性。

2.3 域名匹配

客户端检查证书中的域名，确保其与用户访问的域名匹配。

如果证书验证失败（例如证书过期、签名无效或域名不匹配），客户端会终止连接，并向用户显示错误信息。

3. 对称密钥生成

3.1 客户端生成对称密钥

客户端生成一个对称加密密钥（称为会话密钥），用于后续数据传输的加密。这个密钥的生成过程利用了客户端和服务器各自生成的随机数。

3.2 密钥交换

客户端使用服务器的公钥加密会话密钥，然后将加密后的密钥发送给服务器。服务器使用自己的私钥解密，得到会话密钥。

4. 加密通信

一旦会话密钥生成并交换完成，客户端和服务器就可以使用这个密钥进行加密通信。后续的数据传输都通过对称加密进行保护，确保数据的机密性和完整性。

5. 会话建立完成

在 TLS 握手和认证过程完成后，客户端和服务器之间的加密通道就建立起来了。后续的 HTTP 请求和响应通过这个加密通道进行传输，确保数据的安全性。

总结

HTTPS 的认证过程主要涉及以下几个关键步骤：

  1. 客户端发起 HTTPS 请求，包括支持的协议版本、加密算法和生成的随机数。
  2. 服务器响应，返回 SSL/TLS 证书、支持的协议版本、加密算法和生成的随机数。
  3. 证书验证，客户端检查证书的有效性、签名和域名匹配。
  4. 对称密钥生成和交换，客户端生成会话密钥并使用服务器公钥加密发送给服务器，服务器解密获得会话密钥。
  5. 加密通信，使用对称加密进行数据传输，确保数据的安全性。

通过上述过程，HTTPS 确保了客户端和服务器之间的通信是安全和可信的。

  • H5新特性

HTML5（H5）带来了许多新特性和改进，旨在提升网页的功能、性能和用户体验。这些新特性涵盖了语义、图形、多媒体、表单控制、连接性、离线和存储、多任务和性能、以及 JavaScript APIs 等方面。以下是 HTML5 中一些主要的新特性及其详细说明。

1. 语义标签

HTML5 引入了许多新的语义标签，帮助开发者更清晰地描述文档结构，提高可读性和可访问性。

  • <header>：定义页面或章节的头部内容。
  • <footer>：定义页面或章节的底部内容。
  • <article>：定义独立的内容区域，适合文章、博客、新闻内容等。
  • <section>：定义文档中的章节。
  • <nav>：定义导航链接区域。
  • <aside>：定义页面内容之外的内容部分，通常作为侧栏。
  • <main>：定义文档的主要内容区域。

示例

<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content goes here</p>
  </article>
</main>
<aside>
  <h2>Related Content</h2>
  <p>Additional information</p>
</aside>
<footer>
  <p>Footer content</p>
</footer>

2. 图形和多媒体

HTML5 增强了对多媒体内容的支持，增加了新的图形和多媒体元素。

  • <canvas>：一个通过 JavaScript 绘制图形的画布。
  • <svg>：支持可缩放矢量图形（Scalable Vector Graphics），可用于创建矢量图。
  • <video>：用于嵌入视频的标签，支持多种视频格式。
  • <audio>：用于嵌入音频的标签，支持多种音频格式。

示例

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const context = canvas.getContext('2d');
  context.fillStyle = 'red';
  context.fillRect(10, 10, 150, 100);
</script>

<video controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

3. 新的表单控件和属性

HTML5 增加了许多新的表单控件和属性，提高了表单的功能和用户体验。

  • 新的输入类型：email、url、number、range、date、datetime-local、month、week、time、color 等。
  • 新的属性：placeholder、required、pattern、min、max、step。

示例

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="example@example.com" required>

  <label for="number">Number:</label>
  <input type="number" id="number" name="number" min="1" max="100" step="1">

  <label for="date">Date:</label>
  <input type="date" id="date" name="date">
</form>

4. 本地存储

HTML5 引入了几种新方式来在客户端存储数据，以替代传统的 cookie。

  • localStorage：提供简单的键值对存储，数据存储没有过期时间。
  • sessionStorage：提供简单的键值对存储，但数据仅在会话期间保留。
  • IndexedDB：提供一个低级 API 用于存储大型数据集合。

示例

// localStorage 示例
localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // 输出: John
localStorage.removeItem('username');

// sessionStorage 示例
sessionStorage.setItem('sessionKey', '12345');
console.log(sessionStorage.getItem('sessionKey')); // 输出: 12345
sessionStorage.removeItem('sessionKey');

5. 离线和存储

HTML5 提供了在网络连接不可用时仍能够正常工作的机制。

  • Service Workers：允许拦截和处理网络请求，以及缓存资源以实现离线功能。
  • Application Cache：一种更为老旧的方法，用于离线缓存整个网页（注意：已废弃，建议使用 Service Workers）。

Service Worker 示例

// 在 JavaScript 文件中
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });
}

// 在 service-worker.js 文件中
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('v1').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/script.js',
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

6. 新的 JavaScript APIs

HTML5 引入了许多新的 JavaScript APIs，扩展了网页的功能。

  • Geolocation API：允许获取用户的地理位置信息。
  • WebSocket API：提供与服务器之间的全双工通信。
  • Web Workers：允许在后台运行 JavaScript，不阻塞主线程。
  • File API：提供文件读取和处理的接口。

Geolocation 示例

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log('Latitude:', position.coords.latitude);
    console.log('Longitude:', position.coords.longitude);
  });
} else {
  console.log('Geolocation is not supported by this browser.');
}

Web Workers 示例

// 在 worker.js 文件中
onmessage = function(e) {
  console.log('Message received from main script');
  const result = e.data[0] * e.data[1];
  postMessage(result);
};

// 在主脚本中
const worker = new Worker('worker.js');
worker.postMessage([10, 20]);
worker.onmessage = function(e) {
  console.log('Result: ' + e.data);
};

7. 响应性设计

HTML5 提供了支持响应性设计的规范，如媒体查询（Media Queries）和新的布局模型。

媒体查询示例

/* CSS */
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

总结

HTML5 带来了许多新特性和改进，涵盖了语义标签、图形和多媒体、表单控件和属性、本地存储、离线和存储、JavaScript APIs 和响应性设计等。这些新特性使得网页开发更强大，更灵活，并带来了更好的用户体验。通过掌握这些特性，开发者可以创建现代化、功能丰富的网页应用。

  • JS排序算法

在 JavaScript 中，有多种常见的排序方法，每种方法都有其特点、优点和适用场景。以下是几种常见的排序方法及其实现、解析和优化建议：

1. 冒泡排序（Bubble Sort）

实现

冒泡排序是一种简单但效率较低的排序算法，通过多次遍历数组，将相邻两个元素进行比较并交换，逐步将较大的元素“冒泡”到数组末尾。

function bubbleSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        for (let j = 0; j < len - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
            }
        }
    }
    return arr;
}

console.log(bubbleSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n^2)
  • 空间复杂度：O(1)

冒泡排序适合用于小规模的数据排序。当数组几乎已排序时，可以通过设置标志位来优化，减少不必要的遍历。

function improvedBubbleSort(arr) {
    let len = arr.length;
    let swapped;
    do {
        swapped = false;
        for (let i = 0; i < len - 1; i++) {
            if (arr[i] > arr[i + 1]) {
                [arr[i], arr[i + 1]] = [arr[i + 1], arr[i]];
                swapped = true;
            }
        }
        len--;  //减少尾部已排序部分
    } while (swapped);
    return arr;
}

console.log(improvedBubbleSort([5, 3, 8, 4, 2]));

2. 选择排序（Selection Sort）

实现

选择排序通过遍历数组，找到最小的元素并将其放在数组的最前面，然后继续遍历剩余部分。每次遍历找出最小值并交换。

function selectionSort(arr) {
    let len = arr.length;
    for (let i = 0; i < len; i++) {
        let minIndex = i;
        for (let j = i + 1; j < len; j++) {
            if (arr[j] < arr[minIndex]) {
                minIndex = j;
            }
        }
        if (minIndex !== i) {
            [arr[i], arr[minIndex]] = [arr[minIndex], arr[i]];
        }
    }
    return arr;
}

console.log(selectionSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n^2)
  • 空间复杂度：O(1)

选择排序简单但效率低，适合在对性能要求不高的小型数据集上使用。没有额外的优化方法。

3. 插入排序（Insertion Sort）

实现

插入排序通过逐步扩展已排序序列，对未排序部分的元素进行插入，从而构建已排序序列。

function insertionSort(arr) {
    let len = arr.length;
    for (let i = 1; i < len; i++) {
        let key = arr[i];
        let j = i - 1;
        while (j >= 0 && arr[j] > key) {
            arr[j + 1] = arr[j];
            j -= 1;
        }
        arr[j + 1] = key;
    }
    return arr;
}

console.log(insertionSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n^2)
  • 空间复杂度：O(1)

插入排序在元素接近已排序状态时效率较高，对于小数据集或部分有序的数据集性能较好。可以提前判断是否已排序，减少不必要的插入操作。

4. 归并排序（Merge Sort）

实现

归并排序是一种分治算法，通过递归地将数组分成较小的子数组，再将这些子数组排序并合并。

function mergeSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    const mid = Math.floor(arr.length / 2);
    const left = mergeSort(arr.slice(0, mid));
    const right = mergeSort(arr.slice(mid));
    return merge(left, right);
}

function merge(left, right) {
    let result = [];
    let leftIndex = 0;
    let rightIndex = 0;
    
    while (leftIndex < left.length && rightIndex < right.length) {
        if (left[leftIndex] < right[rightIndex]) {
            result.push(left[leftIndex]);
            leftIndex++;
        } else {
            result.push(right[rightIndex]);
            rightIndex++;
        }
    }
    return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex));
}

console.log(mergeSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n log n)
  • 空间复杂度：O(n)

归并排序性能较好且稳定，适用于大数据集。但需要额外的内存空间来存储辅助数组。

5. 快速排序（Quick Sort）

实现

快速排序同样是一种分治算法，通过选择一个“基准”元素，将数组分成较小的子数组，再分别排序和合并。

function quickSort(arr) {
    if (arr.length <= 1) {
        return arr;
    }
    const pivot = arr[Math.floor(arr.length / 2)];
    const left = [];
    const right = [];
    const equal = [];
    
    for (let element of arr) {
        if (element < pivot) {
            left.push(element);
        } else if (element > pivot) {
            right.push(element);
        } else {
            equal.push(element);
        }
    }
    
    return quickSort(left).concat(equal).concat(quickSort(right));
}

console.log(quickSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n log n)（平均情况），O(n^2)（最坏情况）
  • 空间复杂度：O(log n) 到 O(n)

快速排序是非常高效的排序算法，但在最坏情况下可能退化为 O(n^2)。通过随机选择基准元素或三数取中值法可以平衡性能。

6. 堆排序（Heap Sort）

实现

堆排序利用最大堆或最小堆的数据结构，将数组排序。构建堆并依次交换堆顶元素。

function heapSort(arr) {
    const len = arr.length;

    function heapify(arr, heapSize, i) {
        let largest = i;
        const left = 2 * i + 1;
        const right = 2 * i + 2;
 
        if (left < heapSize && arr[left] > arr[largest]) {
            largest = left;
        }
 
        if (right < heapSize && arr[right] > arr[largest]) {
            largest = right;
        }
 
        if (largest !== i) {
            [arr[i], arr[largest]] = [arr[largest], arr[i]];
            heapify(arr, heapSize, largest);
        }
    }

    for (let i = Math.floor(len / 2) - 1; i >= 0; i--) {
        heapify(arr, len, i);
    }

    for (let i = len - 1; i >= 0; i--) {
        [arr[0], arr[i]] = [arr[i], arr[0]];
        heapify(arr, i, 0);
    }

    return arr;
}

console.log(heapSort([5, 3, 8, 4, 2]));

解析和优化

  • 时间复杂度：O(n log n)
  • 空间复杂度：O(1)

堆排序效果稳定，不受数据分布影响，但需要复杂的堆操作，适用于需要稳定时间复杂度的场景。

7. 基数排序（Radix Sort）

实现

基数排序是一种非比较的整数排序算法，基于数字的每个位数进行多次排序。

function getMax(arr) {
    let max = arr[0];
    for (let i = 1; i < arr.length; i++) {
        if (arr[i] > max) {
            max = arr[i];
        }
    }
    return max;
}

function countingSort(arr, exp) {
    let output = new Array(arr.length);
    let count = new Array(10).fill(0);

    for (let i = 0; i < arr.length; i++) {
        let index = Math.floor(arr[i] / exp) % 10;
        count[index]++;
    }

    for (let i = 1; i < 10; i++) {
        count[i] += count[i - 1];
    }

    for (let i = arr.length - 1; i >= 0; i--) {
        let index = Math.floor(arr[i] / exp) % 10;
        output[count[index] - 1] = arr[i];
        count[index]--;
    }

    for (let i = 0; i < arr.length; i++) {
        arr[i] = output[i];
    }
}

function radixSort(arr) {
    let max = getMax(arr);

    for (let exp = 1; Math.floor(max / exp) > 0; exp *= 10) {
        countingSort(arr, exp);
    }

    return arr;
}

console.log(radixSort([170, 45, 75, 90, 802, 24, 2, 66]));

解析和优化

  • 时间复杂度：O(k * n)，其中 k 是数字的位数
  • 空间复杂度：O(n + k)

基数排序适合排序包含同一基数的整数数组，在一定场景下性能优越。

8. JavaScript 原生排序方法

实现

JavaScript 提供的原生排序方法 Array.prototype.sort() 使用不同浏览器实现的快排和插入排序混合算法。默认按字符编码排序，需提供比较函数进行数值排序。

let arr = [5, 3, 8, 4, 2];
arr.sort((a, b) => a - b);
console.log(arr);

解析和优化

  • 时间复杂度：O(n log n)
  • 空间复杂度：O(log n)

原生排序性能较好且实现稳定，适用于大多数场景。

总结

不同排序算法适用于不同的数据规模和场景。选择合适的排序算法可以显著提升应用性能，同时结合优化方法（如随机选择基准元素、减少数据移动等）可以达到最佳效果。

  • JS的this指向

在 JavaScript 中，this 是一个非常重要的关键字，它在不同的上下文中会有不同的指向。理解 this 的指向是掌握 JavaScript 高级编程的重要内容之一。下面将介绍常见情况下 this 的指向及规则。

1. 全局上下文

在全局上下文中（非严格模式下），this 指向全局对象 window；在 Node.js 环境中，则指向 global 对象。

console.log(this); // 浏览器环境输出：window
                   // Node.js 环境输出：global

2. 函数调用

在普通函数调用中（非严格模式），this 也指向全局对象 window 或 global。但在严格模式下，this 为 undefined。

function foo() {
    console.log(this);
}
foo(); // 浏览器环境输出：window（非严格模式），undefined（严格模式）

3. 方法调用

当函数作为对象的方法调用时，this 指向调用该方法的对象。

const obj = {
    value: 42,
    getValue: function() {
        console.log(this.value);
    }
};
obj.getValue(); // 输出：42

4. 构造函数调用

当使用 new 关键字调用构造函数时，this 指向新创建的对象实例。

function Person(name) {
    this.name = name;
}

const person1 = new Person("Alice");
console.log(person1.name); // 输出：Alice

5. 箭头函数

箭头函数不绑定自己的 this，而是继承自定义它时的上下文的 this 值，即它的词法作用域。无论它是在哪里调用的，this 都保持不变。

const obj = {
    value: 42,
    getValue: function() {
        const arrow = () => {
            console.log(this.value);
        };
        arrow();
    }
};

obj.getValue(); // 输出：42

6. call, apply, bind 方法

call 和 apply 方法可以显式地指定 this 的指向。bind 返回一个新的函数，确保 this 指向指定的对象。

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

const person = {
    name: "Alice"
};

greet.call(person); // 输出：Alice
greet.apply(person); // 输出：Alice

const boundGreet = greet.bind(person);
boundGreet(); // 输出：Alice

7. 事件处理器

在事件处理器中，this 通常指向触发事件的元素。但使用箭头函数定义事件处理器时，this 会指向定义时的词法上下文，通常是 window 或 undefined（严格模式下）。

const button = document.querySelector("button");

button.addEventListener("click", function() {
    console.log(this); // 输出：button 元素
});

button.addEventListener("click", () => {
    console.log(this); // 输出：window（或 undefined 在严格模式下）
});

8. Class 方法

在类方法中，由于类内部的方法会默认绑定类的实例对象，因此 this 指向该实例。

class Car {
    constructor(make) {
        this.make = make;
    }

    getMake() {
        console.log(this.make);
    }
}

const myCar = new Car("Toyota");
myCar.getMake(); // 输出：Toyota

特殊情况

1. DOM 元素的事件处理函数

const button = document.querySelector('button');
button.addEventListener('click', function() {
    console.log(this); // 输出：被点击的 button 元素
});

2. 内联事件处理器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button onclick="alert(this.tagName)">Click me</button> <!-- this 指向 button 元素 -->
</body>
</html>

总结

  • 全局上下文： this 指向全局对象 (window 或 global)，严格模式下为 undefined。
  • 普通函数调用： this 指向全局对象，严格模式下为 undefined。
  • 方法调用： this 指向调用该方法的对象。
  • 构造函数调用： this 指向新创建的对象实例。
  • 箭头函数： this 继承自定义时的词法作用域。
  • call/apply/bind： 可以显式地指定 this 的指向。
  • 事件处理器： this 指向触发事件的元素。
  • 类方法： this 指向类的实例。

正确理解和使用 this 是掌握 JavaScript 编程的重要基础。根据不同的调用方式，合理地控制和使用 this 能够让代码更简洁明确。

  • JS严格模式

严格模式（Strict Mode）是 ECMAScript 5 中引入的一种运行模式，它通过对 JavaScript 的限制和增强，提高代码的安全性和执行效率。启用严格模式后，代码会在更严格的环境下执行，抛出更多的异常以帮助开发者发现潜在的错误。

启用严格模式

可以在整个脚本或单个函数中启用严格模式。要启用严格模式，可以在代码的开头添加一行 "use strict";。

整个脚本启用严格模式

"use strict";

function foo() {
    // 这里是严格模式
}

// 整个脚本都在严格模式下执行

单个函数启用严格模式

function foo() {
    "use strict";
    // 这里是严格模式
}

function bar() {
    // 这里是非严格模式
}

严格模式的特点

  1. 禁止意外的全局变量

    在严格模式下，意外创建的全局变量会抛出错误，例如在赋值时没有用 var, let, 或 const 声明变量。

    "use strict";
x = 10; // ReferenceError: x is not defined

  2. 静默失败的赋值会抛出错误

    在非严格模式下，给只读属性赋值不会报错，但在严格模式下会抛出 TypeError。

    "use strict";
const obj = {};
Object.defineProperty(obj, "x", { value: 42, writable: false });
obj.x = 9; // TypeError: Cannot assign to read only property 'x' of object '#<Object>'

  3. 禁止删除不可删除的属性

    严格模式下，删除不可删除的属性会抛出错误。

    "use strict";
delete Object.prototype; // TypeError: Cannot delete property 'prototype' of function Object() { [native code] }

  4. 要求参数名唯一

    严格模式下，函数参数必须唯一，否则会抛出 SyntaxError。

    "use strict";
function sum(a, a, c) { // SyntaxError: Duplicate parameter name not allowed in this context
    return a + a + c;
}

  5. this 会被绑定到 undefined 而不是全局对象

    在非严格模式下，调用函数时 this 默认为全局对象 window，在严格模式下，this 是 undefined。

    "use strict";
function foo() {
    console.log(this); // undefined
}
foo();

  6. 禁止使用 with

    严格模式禁用了 with 语句，因为它会导致代码难以优化和调试。

    "use strict";
with (Math) { // SyntaxError: Strict mode code may not include a with statement
    x = cos(2);
}

  7. 禁止使用 eval 创建变量和函数

    严格模式下，eval 不在其外部作用域创建变量，并且其创建的变量在 eval 里是局部变量。

    "use strict";
eval("var x = 2;");
console.log(x); // ReferenceError: x is not defined

  8. 严格模式下的八进制字面量

    严格模式下禁止使用八进制字面量，八进制字面量以 0 开头。

    "use strict";
let num = 010; // SyntaxError: Octal literals are not allowed in strict mode

  9. 对象字面量中的重复属性

    在严格模式下，对象字面量中不能有重复的属性名称。

    "use strict";
const obj = {
    prop: 1,
    prop: 2 // SyntaxError: Duplicate data property in object literal not allowed in strict mode
};

  10. 不能使用 arguments.caller 和 arguments.callee

    严格模式下，这两个属性被禁用，这是为了优化堆栈跟踪解析。

    "use strict";
function foo() {
    console.log(arguments.callee); // TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed in strict mode
}
foo();

严格模式的好处

  1. 更早发现错误：严格模式下会抛出更多的错误，可以帮助开发者更早地发现代码中的问题。

  2. 避免意外的全局变量：防止无意中创建全局变量，从而减少意外的变量覆盖和内存泄漏。

  3. 提高代码的安全性：禁止使用 eval 和 with 等不安全的功能，提高代码的安全性和运行效率。

  4. 增强兼容性：ES6 模块和类默认使用严格模式，因此在现有代码中启用严格模式，可以确保与未来标准的兼容性。

总结

严格模式通过引入一系列限制和增强，帮助开发者写出更安全、性能更好的 JavaScript 代码。了解和使用严格模式是掌握 JavaScript 编程的一个重要步骤。通过在项目中启用严格模式，开发者可以更早地发现潜在的错误，提高代码质量，并确保代码能够与现代 JavaScript 标准保持一致。

  • V8引擎的垃圾回收机制

V8 引擎是 Google 的 JavaScript 和 WebAssembly 引擎，它用于 Google Chrome 浏览器和 Node.js 等环境中。V8 引擎的垃圾回收（GC）机制旨在高效地管理内存，以确保 JavaScript 程序的性能和响应性。V8 使用了一种分代垃圾回收机制，这种机制根据对象的生命周期将内存分为几个不同的区域，并使用适当的算法进行垃圾回收。

分代垃圾回收

V8 引擎基于“分代假说”，即大部分对象在内存中的生命周期是短暂的，小部分对象有较长的生命周期。基于这一假设，V8 将内存分为两个主要区域：新生代（Young Generation）和老生代（Old Generation）。

新生代

新生代内存区用于存放生命周期较短的对象。新生代内存区进一步细分为两个区域：From 空间和 To 空间。新创建的对象首先存储在 From 空间，一旦这个空间中的某些对象存活下来并且经过了若干次垃圾回收，它们就会被移动到 To 空间。最终，To 空间中的对象在再次垃圾回收时就会被提升（Promote）到老生代。

  • Scavenge算法：新生代的垃圾回收通常使用 Scavenge 算法。这是一种基于复制的垃圾回收算法，将活跃对象从 From 空间复制到 To 空间，释放 From 空间中不再使用的对象。

老生代

老生代内存区用于存放生命周期较长的对象。当对象从新生代提升到老生代后，它们就在这里占据内存。

  • 标记清除（Mark-Sweep）：这是一种经典的垃圾回收算法，分为两个阶段。首先，在标记阶段会遍历所有的对象，标记所有可达对象。然后，在清除阶段会清理所有未标记的对象。
  • 标记压缩（Mark-Compact）：为了减少内存碎片，V8 还采用了标记压缩算法。标记阶段和标记清除类似，但在清除阶段，活跃对象被压缩到内存中连续的区域，从而释放出较大的连续内存块。

并发和增量垃圾回收

为了减少垃圾回收对应用执行的影响，V8 实现了并发和增量垃圾回收技术：

  1. 并发标记：垃圾回收过程中的标记阶段可以与应用程序并发执行，从而减少阻塞时间。

  2. 增量标记：在垃圾回收过程中，V8 会适当地暂停标记过程，允许应用程序执行一段时间，然后继续标记。这样可以避免长时间的垃圾回收暂停，提升应用的响应性。

垃圾回收触发策略

V8 在以下情况下会触发垃圾回收：

  1. 内存分配失败：当分配新对象时，如果没有足够的内存，会触发垃圾回收。
  2. 内存使用达到阈值：V8 会监控内存使用情况，当内存使用超过预设阈值时，会主动触发垃圾回收。
  3. 手动调用：开发者可以通过 gc() 触发垃圾回收（仅在某些环境下有效，如 Node.js 的 --expose-gc 选项）。

内存分配和垃圾回收的具体实现

新生代的垃圾回收：Scavenge 算法

新生代使用 Scavenge 算法进行垃圾回收，该算法将内存区分为两个半区（From 空间和 To 空间）。主要过程如下：

  1. 复制活跃对象：将 From 空间中的活跃对象复制到 To 空间。
  2. 提升对象：如果对象经过多次垃圾回收仍然存活，则将其提升到老生代。
  3. 交换空间：完成垃圾回收后，From 空间和 To 空间交换角色，原来的 To 空间成为新的 From 空间。

老生代的垃圾回收：Mark-Sweep 和 Mark-Compact

老生代的垃圾回收使用了 Mark-Sweep 和 Mark-Compact 算法：

  1. 标记阶段：从根对象（如全局对象和栈上的对象）开始，递归标记所有可达对象。
  2. 清除阶段：清除未标记的对象，释放内存。
  3. 压缩阶段（仅在 Mark-Compact 中）：将活跃对象移动到内存的连续区域，从而减少内存碎片。

垃圾回收优化策略

V8 引擎使用了多种优化策略，以提高垃圾回收效率并减少暂停时间。这些策略包括：

  1. 增量垃圾回收：在标记阶段，垃圾回收器分阶段执行，以减少一次标记造成的长时间暂停。
  2. 并发垃圾回收：标记阶段和清除阶段可以与应用程序并发执行，以减少对应用程序的阻塞。
  3. 适应性调优：根据程序的内存使用情况，动态调整新生代和老生代的垃圾回收频率和阈值。

垃圾回收的挑战

尽管 V8 的垃圾回收机制经过了许多优化，但仍面临一些挑战：

  1. 内存碎片：尽管 Mark-Compact 算法减少了内存碎片，但在某些情况下仍可能出现碎片问题。
  2. 长时间暂停：在某些情况下，大规模的内存分配和回收可能导致长时间的暂停，影响应用的响应性。
  3. 多线程环境：在多线程环境中，垃圾回收器需要解决并发访问内存的同步问题。

总结

V8 引擎的垃圾回收机制通过分代回收、新生代的 Scavenge 算法、老生代的 Mark-Sweep 和 Mark-Compact 算法，以及并发和增量回收技术，高效地管理内存并减少对应用程序的阻塞。尽管面临一些挑战，V8 仍然通过不断的优化和调优，确保 JavaScript 和 WebAssembly 应用在不同环境中高效稳定地运行。

  • JS Event loop

事件循环（Event Loop）是 JavaScript 处理异步操作的核心机制。尽管 V8 引擎本身并不直接包含事件循环，但它是用来解释和执行 JavaScript 代码的，而事件循环通常由运行环境（如浏览器或 Node.js）提供。下面我们分别介绍 V8 在浏览器环境和 Node.js 环境下的事件循环机制。

V8 在浏览器环境的事件循环

在浏览器环境中（例如 Chrome 浏览器），事件循环由浏览器实现，而不仅仅是 V8 引擎。事件循环负责处理各种任务，包括用户交互、网络请求、DOM 操作等。以下是浏览器环境下事件循环的工作原理：

1. Macrotask 和 Microtask

  • Macrotask（也称为 Task 或 Callback Queue）：包括如事件回调、DOM 操作、网络请求等。这些任务通常是由浏览器的 API 提供的，处理方式比较基础。
  • Microtask（或 Microtask Queue）：包括如 Promise 的回调、MutationObserver 的回调等。这些任务处理速度较快。

2. 浏览器事件循环模型

事件循环在浏览器中的主要步骤如下：

  1. 执行栈：主执行上下文（包含全局上下文和调用栈中的函数上下文）。
  2. 处理 Microtask 队列：执行所有的 Microtask，Microtask 队列在每一个 Macrotask 后运行。
  3. 渲染（repaint 或 reflow）：处理用户界面的重新渲染。
  4. 处理 Macrotask：一次执行一个 Macrotask，完成后返回步骤 2。

代码示例

console.log('script start');

setTimeout(() => {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
    console.log('promise1');
}).then(() => {
    console.log('promise2');
});

console.log('script end');

// 输出顺序：
// script start
// script end
// promise1
// promise2
// setTimeout

在上述代码中，console.log('script start') 和 console.log('script end') 立即执行。setTimeout 推送到 Macrotask 队列，Promise 的回调推送到 Microtask 队列。因为 Microtask 优先于 Macrotask 执行，所以 Promise 回调在 setTimeout 回调之前执行。

Node.js 环境的事件循环

Node.js 的事件循环与浏览器环境类似，但包含了一些特定的实现细节。Node.js 基于 libuv 库实现了自己的事件循环机制，主要用于处理 I/O 操作。

1. 事件循环的阶段

Node.js 的事件循环分为不同的阶段，每个阶段都有一个 FIFO 队列来执行相应任务：

  1. Timers 阶段：执行 setTimeout 和 setInterval 的回调。
  2. I/O callbacks 阶段：执行某些系统操作的回调，例如 TCP 错误类型。
  3. Idle, prepare 阶段：仅内部使用。
  4. Poll 阶段：检索新的 I/O 事件; 执行 I/O 回调。
  5. Check 阶段：执行 setImmediate 的回调。
  6. Close callbacks 阶段：执行一些关闭连接的回调，如 socket.on('close', ...)。

2. Microtask 队列

Node.js 也有 Microtask 队列，包含 process.nextTick 和 Promise 的回调。在每个阶段结束时，都会依次处理所有的 Microtask。

代码示例

console.log('start');

setTimeout(() => {
    console.log('setTimeout');
}, 0);

setImmediate(() => {
    console.log('setImmediate');
});

process.nextTick(() => {
    console.log('nextTick');
});

Promise.resolve().then(() => {
    console.log('promise');
});

console.log('end');

// 输出顺序：
// start
// end
// nextTick
// promise
// setTimeout 或 setImmediate
// setImmediate 或 setTimeout

在上述代码中，console.log('start') 和 console.log('end') 立即执行。setTimeout 的回调推送到 Timers 阶段，setImmediate 的回调推到 Check 阶段。由于 process.nextTick 和 Promise 的回调都是 Microtask，在当前阶段结束后立即执行，因此它们先于 setTimeout 和 setImmediate 执行。

注意：setTimeout 和 setImmediate 的执行顺序在理论上是不确定的，实际执行顺序可能不同，尤其是当它们在 I/O 周期内被调用时。

总结

尽管 V8 引擎负责执行 JavaScript 代码，事件循环的实现则由运行时环境（浏览器或 Node.js）负责。浏览器与 Node.js 各自的事件循环机制略有不同，但都包含处理任务和微任务的机制：

  • 浏览器环境: 事件循环分为 Macrotask 和 Microtask，Microtask 在 Macrotask 之前执行。
  • Node.js 环境: 事件循环分为多个阶段，并在每个阶段处理 Microtask，process.nextTick 和 Promise 的回调优先于其他任务执行。

理解这些差异和具体实现，有助于我们在不同环境中编写高效、响应迅速的 JavaScript 代码。

  • JS的原型和原型链

JavaScript 是一种基于原型的语言，其对象继承机制不同于基于类的面向对象编程语言。理解原型（prototype）和原型链（prototype chain）是掌握 JavaScript 对象基础的关键。本文将深入介绍 JavaScript 中的原型和原型链。

原型（Prototype）

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，它指向另一个对象，这个对象称为原型。当你访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会在其原型对象上查找，直到找到或者到达原型链的末端（null）。

1. 原型对象

每个函数（包括构造函数）在创建时会自动生成一个 prototype 属性，这个属性指向一个对象，这个对象包含由该构造函数创建的实例共享的属性和方法。

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log("Hello, my name is " + this.name);
};

const alice = new Person("Alice");
alice.sayHello(); // 输出: Hello, my name is Alice

在这个例子中，Person 构造函数的 prototype 属性指向一个对象，这个对象包含 sayHello 方法。alice 对象通过原型链访问并调用了这个方法。

2. __proto__ 属性

JavaScript 对象有一个非标准的但在浏览器中广泛支持的属性 __proto__，它指向对象的原型。__proto__ 与对象的内部属性 [[Prototype]] 是相同的。

console.log(alice.__proto__ === Person.prototype); // true

原型链（Prototype Chain）

原型链是由对象及其原型组成的链条。在查找对象属性或方法时，JavaScript 引擎会向上遍历原型链，直到找到或达链条末端（null）。

1. 原型链查找

function Animal() {}

Animal.prototype.speak = function() {
    console.log("Animal speaks");
};

const dog = new Animal();
dog.speak();  // 输出: Animal speaks

// 在 dog 中查找 speak 属性，未找到
// 在 dog.__proto__（即 Animal.prototype）中查找 speak 属性，找到并调用

在这个示例中，dog 对象没有 speak 方法，因此 JavaScript 引擎会沿着原型链在 dog.__proto__（即 Animal.prototype）中查找并找到 speak 方法。

2. 多层原型链

function Animal() {}

Animal.prototype.speak = function() {
    console.log("Animal speaks");
};

function Dog() {}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const myDog = new Dog();
myDog.speak();  // 输出: Animal speaks

// 在 myDog 中查找 speak 属性，未找到
// 在 myDog.__proto__（即 Dog.prototype）中查找 speak 属性，未找到
// 在 myDog.__proto__.__proto__（即 Animal.prototype）中查找 speak 属性，找到并调用

在这个例子中，Dog 构造函数原型继承了 Animal 构造函数的原型，这使得 myDog 对象可以通过原型链访问 Animal.prototype 中的方法。

构造函数、原型和实例的关系

graph TD;
    A[构造函数] -- prototype --> B[原型对象]
    B -- constructor --> A
    C[实例对象] -- __proto__ --> B
  • 构造函数：拥有一个 prototype 属性，指向原型对象。
  • 原型对象：拥有一个 constructor 属性，指向构造函数。
  • 实例对象：拥有一个 __proto__ 属性，指向原型对象。

内置对象的原型链

所有 JavaScript 对象的原型链顶端都是 Object.prototype，之后是 null：

console.log(Object.prototype.__proto__); // null

例如：

const arr = [];
console.log(arr.__proto__); // Array.prototype
console.log(arr.__proto__.__proto__); // Object.prototype
console.log(arr.__proto__.__proto__.__proto__); // null

手动设置原型

你可以手动设置对象的原型，但要谨慎，因为这可能会影响性能和可读性。常见的方法有 Object.create() 和 Object.setPrototypeOf()：

1. 使用 Object.create()

const person = {
    isHuman: false,
    sayHello: function() {
        console.log("Hello");
    }
};

const alice = Object.create(person);
alice.name = "Alice";

console.log(alice.isHuman); // 输出: false
alice.sayHello(); // 输出: Hello

2. 使用 Object.setPrototypeOf()

const obj1 = { a: 1 };
const obj2 = { b: 2 };

Object.setPrototypeOf(obj2, obj1);

console.log(obj2.a); // 输出: 1

设计模式与原型链

了解原型链，可以帮助我们设计更高效和灵活的 JavaScript 代码，常用的设计模式包括：

  • 原型模式（Prototype Pattern）
  • 工厂模式（Factory Pattern）
  • 单例模式（Singleton Pattern）

总结

  • 原型（Prototype）：每个对象都有一个内部属性 [[Prototype]]，指向另一个对象。
  • 原型链（Prototype Chain）：对象及其原型构成的链条，在查找属性时沿着链条向上查找。
  • 构造函数、原型和实例的关系：构造函数拥有 prototype 属性，原型对象拥有 constructor 属性，实例对象拥有 __proto__ 属性。
  • 内置对象的原型链：任何 JavaScript 对象的原型链顶端都是 Object.prototype，之后是 null。

掌握 JavaScript 的原型和原型链是深入理解 JavaScript 原型继承、设计模式以及高效实现代码复用的关键。通过运用

这些概念，可以设计出更高级的对象结构，提高代码的可维护性和灵活性。

  • react 函数组件和类组件对比

React 是一个用于构建用户界面的 JavaScript 库，它提供了两种创建组件的方法：函数组件（Function Component）和类组件（Class Component）。每种方法都有其特点和适用场景。以下是对函数组件和类组件的详细对比及其各自的优缺点。

基本定义和示例

函数组件（Function Component）

函数组件是使用 JavaScript 函数定义的组件，函数组件通常更加简洁和易于理解。函数组件自 React 16.8 引入 Hooks 以来，具备了与类组件相同的功能。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

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

类组件（Class Component）

类组件是通过 ES6 类定义的，通过继承 React.Component 创建。类组件使用 this.state 管理状态，使用生命周期方法处理副作用。

import React, { Component } from 'react';

class ClassComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.increment = this.increment.bind(this);
  }

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  componentDidUpdate() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

对比

1. 语法简洁性

  • 函数组件: 通常更简洁，没有冗长的 this 绑定问题。可以通过 Hooks 方便地使用状态和副作用。
  • 类组件: 需要编写构造函数和绑定事件处理器，语法相对冗长。

2. 状态管理

  • 函数组件: 使用 useState Hook 进行状态管理，多个状态可以独立管理。
  • 类组件: 使用 this.state 和 this.setState 管理状态，所有状态集中在一个对象中。

3. 副作用处理

  • 函数组件: 使用 useEffect Hook 处理副作用，替代了类组件中的生命周期方法。
  • 类组件: 使用生命周期方法（如 componentDidMount，componentDidUpdate，componentWillUnmount）处理副作用。

4. 生命周期方法

  • 函数组件: 无需显式定义生命周期方法，通过 useEffect 完成相同的功能。
  • 类组件: 通过特定名称的生命周期方法进行控制。

5. 性能

  • 函数组件: 因为没有 this 绑定和原型链查找，函数组件在某些场景下性能略优。更适合无状态或简单状态的展示组件。
  • 类组件: 由于函数组件的性能优化和提升，类组件的性能优势逐渐减少。

6. 可测试性和可维护性

  • 函数组件: 更容易测试和维护。Hooks 提供了更好的结构化代码方式。
  • 类组件: 测试和维护相对复杂，需要注意 this 绑定，并且生命周期方法容易膨胀。

7. Refs 使用

  • 函数组件: 使用 useRef Hook 方便地获取和操作 DOM 元素或创建持久化变量。
  • 类组件: 使用 React.createRef 创建引用，ref 属性需要在构造函数中初始化。

Hooks 的优势

自 React 16.8 引入 Hooks 以来，函数组件得到了更广泛的应用。Hooks 提供了一些类组件无法比拟的优势：

  1. 逻辑复用: 使用自定义 Hooks，将状态和副作用逻辑提取到可复用的函数中。
  2. 更好地组合逻辑: 多个 useEffect 可以替代类组件中的臃肿的生命周期方法。
  3. 简化组件结构: 没有冗余的类和方法，代码简洁易懂。

使用场景

  • 函数组件: 适用于大部分场景，特别是展示组件和使用 Hook 管理状态和副作用的场景。
  • 类组件: 在某些需要复杂生命周期控制或者老项目中仍有使用，但逐渐较少新项目采用。

兼容性

函数组件和类组件可以在同一个 React 项目中共存。即使你使用了函数组件和 Hooks，你仍然可以在某些特定情况下使用类组件。

总结

  • 函数组件: 语法简洁、易于维护、性能好，使用 Hooks 达到强大的功能复用。
  • 类组件: 更传统和直观的方式，适合一些特殊需求和已有代码，但在新项目中逐渐被函数组件取代。

随着 Hooks 的广泛应用和社区的支持，函数组件已经成为构建 React 应用的主流方法。理解和掌握函数组件以及 Hooks，可以显著提升代码的可维护性和开发效率。

  • 如何理解高内聚低耦合

高内聚（High Cohesion）和低耦合（Low Coupling）是软件设计中的两个重要原则，它们对提高代码的可维护性、可重用性和可靠性有着重要作用。在进行软件架构设计和模块化开发时，理解和应用这些原则有助于创建更清晰、健壮和可扩展的系统。

高内聚（High Cohesion）

高内聚指的是一个模块（类、函数、组件等）内的元素（数据和行为）紧密相关，并共同完成单一功能的特性。内聚程度高的模块，其职责单一且明确，易于理解和维护。

高内聚的特点

  1. 单一职责：模块仅处理与其核心功能相关的任务。
  2. 可维护性：模块职责清晰，修改代码时，影响范围较小，易于测试和排错。
  3. 可重用性：职责明确的模块可以在不同上下文中复用。
  4. 易扩展性：高内聚模块通常提供确切边界，使得功能扩展更容易。

示例

一个高内聚的类示例（以一个简单的电商系统为例）

class Order:
    def __init__(self, items, customer):
        self.items = items
        self.customer = customer

    def calculate_total(self):
        return sum(item.price for item in self.items)

    def add_item(self, item):
        self.items.append(item)

    def remove_item(self, item):
        self.items.remove(item)

在这个例子中，Order 类职责单一，专注于与订单相关的操作，如计算总价、添加和移除商品。

低耦合（Low Coupling）

低耦合指的是模块之间的依赖关系较少或弱，模块可以独立变化而不会影响其它模块。低耦合系统更具稳健性，可在不影响巨大代码库的情况下更新或替换个别模块。

低耦合的特点

  1. 独立性强：模块之间的依赖关系较少，修改一个模块的实现不会影响其他模块。
  2. 可维护性：模块之间松散耦合，便于独立测试和调试。
  3. 可扩展性：易于添加新模块或替换现有模块而不破坏系统整体结构。
  4. 可理解性：低耦合的系统结构清晰，使得开发者更容易理解模块间关系。

示例

使用接口和依赖注入降低耦合（以一个简单的支付系统为例）

class PaymentProcessor:
    def process_payment(self, amount):
        raise NotImplementedError("Subclasses should implement this method")

class CreditCardProcessor(PaymentProcessor):
    def process_payment(self, amount):
        print(f"Processing credit card payment of {amount}")

class PayPalProcessor(PaymentProcessor):
    def process_payment(self, amount):
        print(f"Processing PayPal payment of {amount}")

class Checkout:
    def __init__(self, payment_processor):
        self.payment_processor = payment_processor

    def complete_purchase(self, amount):
        self.payment_processor.process_payment(amount)

# 使用信用卡处理支付
checkout = Checkout(CreditCardProcessor())
checkout.complete_purchase(100)

# 使用PayPal处理支付
checkout = Checkout(PayPalProcessor())
checkout.complete_purchase(200)

在这个例子中，Checkout 类依赖于 PaymentProcessor 接口，而不是具体的支付处理实现。可以很容易地替换支付处理方式，而不需要修改 Checkout 类。

高内聚和低耦合的关系

  1. 相辅相成：高内聚和低耦合相辅相成，高内聚确保独立模块职责明确，低耦合保证模块间依赖关系最小化。两者同时应用，可以提高系统的灵活性和可维护性。
  2. 案例理解：在实际开发中，经常需要在模块边界明确、内聚性高的同时，通过接口、依赖注入等方式降低耦合，提高模块可替换性和独立性。

实践技巧

  1. 使用接口/抽象类：通过接口或抽象类定义模块间通信协议，减少具体实现间的依赖。
  2. 模块化设计：划分系统为明确职责的模块，各个模块内部高内聚，对外暴露统一接口。
  3. 依赖注入：使用依赖注入技术，将依赖关系通过构造函数或注入框架传递，减少模块直接依赖。
  4. 持续重构：在开发过程中不断重构代码，确保高内聚和低耦合。代码审查和单元测试有助于发现和改进设计问题。

结论

高内聚低耦合在软件设计中是至关重要的原则，通过单一职责创建高内聚模块，并通过接口和依赖注入实现低耦合系统，可以显著提高代码的可维护性、可扩展性和复用性。理解这些原则并在实际开发中应用，有助于构建健壮和高质量的系统。

  • 怎样提高前端代码可扩展性

提升前端代码的可扩展性是确保项目长期可维护、易于添加新功能、适应需求变化的关键。以下是一些原则和策略，可以帮助你提升前端代码的可扩展性：

1. 模块化开发

将代码拆分成独立的模块，每个模块只应负责实现特定的功能。模块化开发有助于隔离变化，提高代码的可读性和可维护性。

  • 组件化: 在框架（如 React、Vue、Angular）中，将 UI 拆分为独立的组件，每个组件负责实现单一功能。
// React 示例
function Button(props) {
  return <button>{props.label}</button>;
}
  • 使用 ES6 模块: 利用 JavaScript 的模块化机制，通过 import 和 export 语句进行模块管理。
// Button.js
export function Button() {
  return <button>Click me</button>;
}

// App.js
import { Button } from './Button';

2. 单一职责原则（SRP）

确保每个模块/组件只做一件事，这样更容易理解、测试和重用。

  • 分离逻辑和 UI: 例如在 React 中，可以将处理逻辑放在容器组件中，将展示逻辑放在展示组件中。
// ContainerComponent.js
function ContainerComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData().then(setData);
  }, []);

  return <DisplayComponent data={data} />;
}

// DisplayComponent.js
function DisplayComponent({ data }) {
  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

3. 使用接口/抽象层

通过定义清晰的接口和抽象层，减少模块之间的紧密耦合，使得模块更容易替换和扩展。

// TypeScript 示例
interface PaymentProcessor {
  process(amount: number): void;
}

class PayPalProcessor implements PaymentProcessor {
  process(amount: number) {
    console.log(`Processing PayPal payment of ${amount}`);
  }
}

class StripeProcessor implements PaymentProcessor {
  process(amount: number) {
    console.log(`Processing Stripe payment of ${amount}`);
  }
}

function processPayment(processor: PaymentProcessor, amount: number) {
  processor.process(amount);
}

4. 依赖注入（Dependency Injection）

通过依赖注入，将模块依赖通过构造函数或注入器传递，避免模块直接创建依赖对象。这样可以提高模块的可测试性和可替换性。

// 使用 React Context 实现依赖注入
const AuthContext = React.createContext();

function AuthProvider({ children }) {
  const auth = useAuth();
  return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
}

function useAuth() {
  return useContext(AuthContext);
}

// 在组件中使用
function Profile() {
  const auth = useAuth();
  return <div>{auth.user.name}</div>;
}

5. 采用设计模式

合理应用设计模式，可以有效提升代码的扩展性、灵活性和可维护性。

  • 工厂模式（Factory Pattern）: 通过工厂方法创建对象，避免直接使用构造函数。
class ButtonFactory {
  createButton(type) {
    switch(type) {
      case 'primary':
        return new PrimaryButton();
      case 'secondary':
        return new SecondaryButton();
      default:
        throw new Error('Invalid button type');
    }
  }
}
  • 观察者模式（Observer Pattern）: 事件驱动编程，通过发布-订阅机制实现模块之间的松耦合。
class EventEmitter {
  constructor() {
    this.events = {};
  }

  on(event, listener) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(listener);
  }

  emit(event, ...args) {
    if (this.events[event]) {
      this.events[event].forEach(listener => listener(...args));
    }
  }
}

const emitter = new EventEmitter();

// 订阅
emitter.on('data', data => console.log(data));

// 发布
emitter.emit('data', { id: 1, name: 'John' });

6. 使用 TypeScript

TypeScript 通过静态类型检查，可以捕获许多在 JavaScript 中运行时才会暴露的问题。它可以帮助更好地设计接口和数据结构，提高代码的可读性和可维护性。

interface User {
  id: number;
  name: string;
}

function getUserName(user: User): string {
  return user.name;
}

7. 保持代码简洁和避免重复

遵循 KISS（Keep It Simple, Stupid）和 DRY（Don't Repeat Yourself）原则，保持代码简洁，避免冗余。

  • 提取公共函数：将重复使用的逻辑提取到单独的函数或模块中。
// APIUtils.js
export function fetchData(url) {
  return fetch(url).then(response => response.json());
}

// 使用
import { fetchData } from './APIUtils';

fetchData('/api/data').then(data => console.log(data));

8. 持续测试和重构

编写单元测试和集成测试，确保各个模块正常工作和相互协调。定期进行代码重构，保持代码质量。

  • 测试驱动开发（TDD）：先编写测试，再编写代码，实现高覆盖率的测试，确保代码的可靠性。
import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
  render(<App />);
  const linkElement = screen.getByText(/learn react/i);
  expect(linkElement).toBeInTheDocument();
});
  • 代码审查：通过代码审查，发现潜在问题，并进行优化提高代码质量。

9. 版本控制和持续集成

通过版本控制工具（如 Git），管理代码变更历史，确保代码变更的可追溯性。同时，配置持续集成（CI）工具（如 Travis CI，CircleCI），自动化测试和部署流程，提高开发效率。

  • Git 分支管理：使用 Git 分支策略（如 Git Flow），管理特性开发、发布和修补分支。

  • CI/CD：配置持续集成和持续交付管道，确保代码变更经过自动化测试和构建，减少手动操作，提高发布效率。

# .travis.yml 示例
language: node_js
node_js:
  - "14"
script:
  - npm run test
  - npm run build

10. 文档和规范

编写详细的代码文档和开发规范，确保团队成员能够理解和遵循统一的开发标准，提高协作和代码一致性。

  • API 文档：使用文档工具（如 JSDoc、TypeDoc）生成 API 文档，便于开发者查看。
/**
 * 获取用户信息
 * @param {number} userId 用户 ID
 * @returns {Promise<User>} 返回用户信息
 */
function getUser(userId) {
  // ...
}
  • 代码规范：使用 linter 工具（如 ESLint、Prettier），统一代码风格，保持代码一致性和可读性。
// .eslintrc.json 示例
{
  "extends": "eslint:recommended",
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "rules": {
    "indent": ["error", 2],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

总结

通过模块化开发、单一职责原则、使用接口和依赖注入、设计模式、TypeScript、简洁代码、持续测试和重构、版本控制和持续集成、文档和规范等策略，可以显著提升前端代码的可扩展性。合理应用这些原则和工具，不仅能提高代码质量，还能在项目需求变化和功能扩展时，快速响应并平稳过渡。

  • 前端工程化

前端工程化是指在前端开发过程中，通过引入一系列工具、方法和规范，提高开发效率、代码质量和团队协作的一种实践。前端工程化涵盖了从项目初始化、代码编写、构建打包、测试部署到持续集成的一整套流程。以下是前端工程化的主要方面及其实践方法：

1. 项目初始化

1.1 使用脚手架工具

使用脚手架工具（如 Create React App、Vue CLI、Angular CLI 等），可以迅速搭建标准化的项目结构，并自动配置开发环境。

  • React:
npx create-react-app my-app
  • Vue:
vue create my-app
  • Angular:
ng new my-app

2. 模块化开发

通过模块化开发，提高代码的可维护性和可复用性。使用 ES6 模块、CommonJS、UMD 等模块化规范。

  • ES6 模块:
// module.js
export function greet(name) {
  return `Hello, ${name}`;
}

// main.js
import { greet } from './module.js';
console.log(greet('World'));

3. 代码质量控制

3.1 代码规范

通过代码规范工具（如 ESLint、TSLint、Prettier 等），统一代码风格，提高代码的可读性和一致性。

  • ESLint:
npm install eslint --save-dev
npx eslint --init
  • Prettier:
npm install prettier --save-dev

3.2 代码格式化

配置代码格式化工具（如 Prettier），自动格式化代码，保持一致的编码风格。

  • 在 ESLint 中集成 Prettier:
// .eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ]
}

4. 打包和构建

使用打包工具（如 Webpack、Parcel、Rollup 等）对代码进行打包和优化，提高加载速度和性能。

  • Webpack:
npm install webpack webpack-cli --save-dev
  • Webpack 配置示例:
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  }
};

5. 环境管理

通过配置文件（如 .env）管理不同环境（开发、测试、生产）下的变量。

  • dotenv:
npm install dotenv --save-dev
  • 使用 .env 文件:
// .env
API_URL=https://api.example.com
  • 在代码中使用:
require('dotenv').config();
console.log(process.env.API_URL);

6. 测试

通过单元测试、集成测试和端到端测试，确保代码的正确性和稳定性。

  • 单元测试: 使用 Jest、Mocha 等工具进行单元测试。
npm install jest --save-dev
  • 单元测试示例:
// sum.js
function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});
  • 运行测试:
npx jest

7. 持续集成和持续部署（CI/CD）

通过配置 CI/CD 工具（如 Jenkins、Travis CI、CircleCI、GitHub Actions 等），实现自动化测试、构建和部署，提升开发效率和交付质量。

  • GitHub Actions 配置示例:
# .github/workflows/nodejs.yml
name: Node.js CI

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
    - run: npm install
    - run: npm test

8. 性能优化

使用性能优化工具和技术，如代码拆分、按需加载、图片优化、Tree shaking 等，提升应用性能。

  • 按需加载:
// React 按需加载
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}
  • Tree Shaking: 使用 Webpack 或 Rollup，移除未使用的代码。

9. 监控和日志

通过前端监控和日志系统（如 Google Analytics、Sentry、LogRocket 等），监控应用运行状态，记录错误和用户行为，及时发现和解决问题。

  • Sentry 集成示例:
npm install @sentry/react @sentry/tracing
  • 在代码中使用:
import * as Sentry from '@sentry/react';
import { Integrations } from '@sentry/tracing';

Sentry.init({
  dsn: 'YOUR_SENTRY_DSN',
  integrations: [new Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});

10. 文档和代码注释

编写详细的项目文档和代码注释，使用工具（如 JSDoc、Storybook）自动生成文档，提升团队协作和代码可读性。

  • JSDoc 示例:
/**
 * Adds two numbers.
 *
 * @param {number} a - The first number.
 * @param {number} b - The second number.
 * @returns {number} The sum of the two numbers.
 */
function add(a, b) {
  return a + b;
}
  • Storybook 示例:
npx sb init
  • 在代码中添加 Story:
// Button.stories.js
import React from 'react';
import { Button } from './Button';

export default {
  title: 'Example/Button',
  component: Button,
};

const Template = (args) => <Button {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  primary: true,
  label: 'Button',
};

11. 版本控制和分支管理

使用 Git 进行版本控制，通过分支策略（如 Git Flow）管理特性开发、发布和补丁。

  • Git Flow 基本操作:
git flow init

总结

前端工程化是一种系统化的方法，通过一系列工具、方法和规范，提升开发效率、代码质量和团队协作。它涵盖了项目初始化、模块化开发、代码质量控制、构建打包、测试、持续集成和部署、性能优化、监控和日志、文档和注释、版本控制和分支管理等多个方面。通过合理使用和配置上述工具和方法，可以构建更加健壮、可维护和可扩展的前端应用。

  • 虚拟列表原理和实现

虚拟列表（Virtual List）的核心原理是按需渲染和动态更新。即只渲染当前视口内可见的列表项，而不渲染整个列表，从而减少 DOM 操作和内存开销，提高性能。这在处理大数据量时尤其有效。

原理详解

  1. 计算可见区域：根据当前的滚动位置、列表项高度和视口高度，计算出当前视口内需要渲染的列表项索引范围。
  2. 动态渲染：根据计算出的可见区域索引范围，动态渲染列表项，并根据滚动位置调整这些列表项的位置。
  3. 滚动监听：监听滚动事件，实时更新可见区域和渲染列表项的位置。

使用 React 实现一个虚拟列表组件

接下来，我们使用 React 实现一个简单的虚拟列表组件。

1. 安装必要依赖

首先，确保创建了一个新的 React 应用（使用 Create React App 或者任何你喜欢的脚手架工具）。

npx create-react-app virtual-list-demo
cd virtual-list-demo
npm start

2. 实现 VirtualList 组件

我们将在 src 目录下创建一个新的组件 VirtualList.js。

// src/VirtualList.js
import React, { useRef, useState, useEffect, useCallback } from 'react';
import PropTypes from 'prop-types';

const VirtualList = ({ itemHeight, itemCount, renderItem, containerHeight }) => {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);

  const handleScroll = useCallback(() => {
    if (containerRef.current) {
      setScrollTop(containerRef.current.scrollTop);
    }
  }, [containerRef]);

  useEffect(() => {
    const container = containerRef.current;
    container.addEventListener('scroll', handleScroll);
    return () => container.removeEventListener('scroll', handleScroll);
  }, [handleScroll]);

  const totalHeight = itemCount * itemHeight;
  const startIndex = Math.floor(scrollTop / itemHeight);
  const endIndex = Math.min(
    itemCount - 1,
    Math.floor((scrollTop + containerHeight) / itemHeight)
  );

  const visibleItems = [];
  for (let i = startIndex; i <= endIndex; i++) {
    const style = {
      position: 'absolute',
      top: `${i * itemHeight}px`,
      height: `${itemHeight}px`,
      width: '100%',
    };
    visibleItems.push(renderItem(i, style));
  }

  return (
    <div
      ref={containerRef}
      style={{
        position: 'relative',
        height: `${containerHeight}px`,
        overflowY: 'auto',
      }}
    >
      <div style={{ height: `${totalHeight}px`, position: 'relative' }}>
        {visibleItems}
      </div>
    </div>
  );
};

VirtualList.propTypes = {
  itemHeight: PropTypes.number.isRequired, // 每个列表项的高度
  itemCount: PropTypes.number.isRequired, // 列表总项数
  renderItem: PropTypes.func.isRequired, // 渲染列表项的函数
  containerHeight: PropTypes.number.isRequired, // 容器的高度
};

export default VirtualList;

3. 使用 VirtualList 组件

接下来，我们在 src/App.js 中使用 VirtualList 组件。

// src/App.js
import React from 'react';
import VirtualList from './VirtualList';

const itemCount = 1000; // 列表总数
const itemHeight = 50; // 每个列表项的高度
const containerHeight = 500; // 容器的高度

const renderItem = (index, style) => {
  return (
    <div key={index} style={style} className="list-item">
      Item {index}
    </div>
  );
};

const App = () => {
  return (
    <div className="App">
      <h1>Virtual List Demo</h1>
      <VirtualList
        itemHeight={itemHeight}
        itemCount={itemCount}
        renderItem={renderItem}
        containerHeight={containerHeight}
      />
    </div>
  );
};

export default App;

4. 添加样式

在 src/App.css 中添加一些样式：

/* src/App.css */

.list-item {
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
}

组件解释

  1. 状态管理和滚动监听：

    • 使用 useRef 和 useState 管理容器的滚动位置。
    • 通过 useEffect 在组件挂载时添加滚动事件监听器，当滚动发生时更新 scrollTop 状态。

  2. 计算可见区域：

    • 根据当前 scrollTop 和 itemHeight 计算出当前可见的起始和结束索引。起始索引 startIndex 是 scrollTop 除以 itemHeight 的商，结束索引 endIndex 是 (scrollTop + containerHeight) 除以 itemHeight 的商，并且 endIndex 不超过总项目数减一。

  3. 动态渲染：

    • 遍历从 startIndex 到 endIndex 的索引，调用 renderItem 函数生成列表项，并赋予每个列表项一个 style 属性，这个属性包含该项在列表中的绝对定位信息。

总结

虚拟列表通过仅渲染视口内可见的列表项，有效地优化了长列表的渲染性能。本文通过 React 实现了一个简单的虚拟列表组件，并解释了其工作原理。通过这种方式，可以在处理大型数据集时显著提升应用性能和用户体验。

  • react fiber架构

React 的 Fiber 架构是 React 16 引入的一种新的协调引擎，用于优化和改善 React 应用的性能和用户体验。Fiber 的核心目标是使 React 能够更加高效地处理复杂的更新场景，特别是动画、手势和响应性较高的交互。

节点与树结构

在 Fiber 架构中，React 通过创建一个 Fiber 树来表示 UI 树的虚拟 DOM。这些节点称为 Fiber 节点，每个 Fiber 节点保存了该节点及其子节点的相关信息，包括该节点的类型、属性、状态，以及对父节点和兄弟节点的引用。

更新调度

在传统的 React 协调机制中，更新是同步进行的，一次渲染过程需要在一个连续的时间片内完成。而 Fiber 架构使得更新过程可以分段进行，React 可以在每个渲染任务之间暂停和恢复，从而使得主线程可以执行其他高优先级任务，如用户交互和动画。

优先级管理

Fiber 架构引入了优先级的概念，每个更新都有一个优先级，React 根据这个优先级来调度更新任务。这样一些重要的任务（例如用户交互）可以优先处理，而不那么重要的任务（例如低优先级的背景更新）可以延后处理。

示例和解释

以下是关于 Fiber 架构的一些关键概念、数据结构和示例代码。

Fiber 节点的数据结构

一个 Fiber 节点的数据结构示例如下：

const fiberNode = {
  type: 'div', // 组件类型(HTML 标签 或 Class 组件 或 Function 组件)
  key: null, // key 属性
  stateNode: {}, // 对应的组件实例或 DOM 节点
  child: null, // 第一个子节点
  sibling: null, // 下一个兄弟节点
  return: null, // 父节点
  pendingProps: {}, // 更新后的新属性
  memoizedProps: {}, // 更新前的旧属性
  memoizedState: null, // 上次渲染后的状态值
  effectTag: null, // 副作用标签，标识需要执行的操作类型（如插入、更新、删除）
  alternate: null, // 与该 Fiber 节点相对应的上一次 Fiber 节点
};

双缓冲技术（Double Buffering）

Fiber 架构采用了双缓冲技术，即更新过程中会维护两棵 Fiber 树：currentFiber 和 workInProgressFiber。currentFiber 是当前显示的已渲染的 Fiber 树，而 workInProgressFiber 则是正在构建的新 Fiber 树。

在更新完成后，React 会将 workInProgressFiber 树切换为 currentFiber 树，这样使得整个状态更新是原子的，不易出现中间状态。

调度与中断

Fiber 架构将渲染工作划分为多个小任务，可以在不同的时间片执行，这样可以避免长时间阻塞主线程。React 可以在每个任务结束后检查是否有更高优先级的任务需要处理，如果有，可以中断当前任务，去处理高优先级任务。

function workLoop() {
  while (task !== null && !shouldYield()) {
    task = performUnitOfWork(task);
  }
  if (task !== null) {
    requestIdleCallback(workLoop);
  }
}

function performUnitOfWork(unit) {
  // 执行具体的渲染任务
  // 返回下一个任务单元
}

requestIdleCallback(workLoop);

在这个示例中，workLoop 函数不断执行 performUnitOfWork 来处理任务，并在每个时间片结束后检查是否需要中断，保证高优先级任务能够及时响应。

调度 优先级

React 将不同类型的更新赋予不同的优先级，例如用户交互的更新具有较高的优先级，而不那么重要的任务可以延后处理。

const NoPriority = 0;
const ImmediatePriority = 1;
const UserBlockingPriority = 2;
const NormalPriority = 3;
const LowPriority = 4;
const IdlePriority = 5;

// 假设某任务需要立即执行，可以赋予 ImmediatePriority 优先级
const currentPriority = ImmediatePriority;

// 调度器会根据优先级决定是否立即执行或延后处理

实践中的 React Fiber

Fiber 提高了 React 应对复杂更新场景的能力，使得应用能够更高效地响应用户交互，并保持界面的渲染性能。以下是一些 Fiber 的实践案例：

  1. 动画和过渡：通过 Fiber，可以更流畅地实现复杂动画和过渡效果，即使在大量数据更新过程中。
  2. 高级用户交互：在响应复杂用户交互（如拖拽和放置）时，Fiber 能够优先处理这些交互任务，使得界面更流畅。
  3. 后台数据同步：低优先级的数据同步任务（如数据预加载或后台数据更新）可以利用 Fiber 的调度机制，在不影响用户体验的情况下完成。

结论

React 的 Fiber 架构大幅提升了 React 应对复杂更新场景的能力，使得 React 应用能够更高效地响应用户交互，并在性能和用户体验之间找到更好的平衡。了解 Fiber 架构及其优先级调度、中断和继续更新等机制，对于优化 React 应用的性能和提升用户体验非常有帮助。了解这些核心原理，有助于更好地诊断和优化 React 应用的性能。

  • JS稀疏数组与稠密数组

在 JavaScript 中，数组可以是稀疏数组（Sparse Array）或稠密数组（Dense Array）。这两者在存储和性能上有显著区别，因此了解它们的差异和应用场景非常重要。

稠密数组（Dense Array）

稠密数组是指数组元素按顺序连续存储，数组中的所有索引位置都有对应的元素。通常用来存储一组连续的数据，是使用数组的常见方式。

特点

  1. 索引连续：所有索引从 0 开始，没有空缺。
  2. 高效内存使用：因为元素是连续存储的，所以内存使用效率高。
  3. 遍历效率高：由于所有元素都是连续存储，遍历操作通常更快。

示例

const denseArray = [0, 1, 2, 3, 4];
console.log(denseArray); // 输出: [0, 1, 2, 3, 4]

稀疏数组（Sparse Array）

稀疏数组是指数组中存在空洞（holes），即某些索引位置没有元素。这通常是由于显式地设置了某些索引位置为 undefined 或者通过直接设置某些索引来创建一个大范围数组。

特点

  1. 索引不连续：某些索引位置没有元素，即使这些位置存在，但其值为 undefined。
  2. 低效内存使用：因为稀疏数组会保留空洞的位置，会占用更多的内存。
  3. 遍历效率低：遍历时需要检查空洞的位置，效率较低。

示例

const sparseArray = [];
sparseArray[1] = 1;
sparseArray[5] = 5;
console.log(sparseArray); // 输出: [ <1 empty item>, 1, <3 empty items>, 5 ]

总结稀疏数组与稠密数组的区别

特性稠密数组（Dense Array）稀疏数组（Sparse Array）
索引是否连续是否
内存使用效率高低
遍历效率高低
访问空洞的代价低高

稠密数组和稀疏数组操作性能对比

JavaScript 引擎针对稠密数组和稀疏数组的操作有不同的优化策略。一般而言，操作稠密数组比操作稀疏数组来的更有效率。例如，遍历稠密数组比遍历稀疏数组的性能要高。

稠密数组遍历

const denseArray = [0, 1, 2, 3, 4];

denseArray.forEach((item, index) => {
  console.log(`Index ${index}: ${item}`);
});

输出：

Index 0: 0
Index 1: 1
Index 2: 2
Index 3: 3
Index 4: 4

稀疏数组遍历

const sparseArray = [];
sparseArray[1] = 1;
sparseArray[5] = 5;

sparseArray.forEach((item, index) => {
  console.log(`Index ${index}: ${item}`);
});

输出：

Index 1: 1
Index 5: 5

程序性能和内存优化

在实际开发中，使用稠密数组可以提高性能和优化内存。在需要创建大范围的列表时，避免使用稀疏数组。如果需要一个稀疏矩阵，考虑使用其他数据结构，如对象或 Map。

结论

稠密数组和稀疏数组在 JavaScript 中有不同的应用场景，各有优缺点。了解它们的特性和区别，有助于在实际开发中针对具体需求选择合适的数据结构，以优化性能和内存使用。

  • react-hooks 解决了什么问题

React Hooks 是 React 16.8 版本引入的一项功能，旨在解决一些在使用类组件时遇到的问题，并为函数组件引入了一些新的功能和优势。具体来说，React Hooks 解决了以下几个主要问题：

1. 状态逻辑复用困难

问题：

  • 在类组件中，状态逻辑通常通过生命周期方法（如 componentDidMount、componentDidUpdate 和 componentWillUnmount）来管理。不同组件间复用状态逻辑（如获取数据、订阅、计时器等）非常困难，通常需要通过高阶组件（HOC）或渲染属性（render props）来实现，这使得代码复杂且不易理解。

解决方案：

  • Hooks 提供了 useState 和 useEffect 等钩子，允许在函数组件中使用状态和副作用，能够轻松地将状态逻辑提取到可复用的函数中（称为自定义 Hooks）。例如： 
    function useFetchData(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    }
    fetchData();
  }, [url]);

  return data;
}

function MyComponent() {
  const data = useFetchData('https://api.example.com/data');
  // ...
}

2. 类组件的复杂性

问题：

  • 类组件引入了复杂的概念，如 this 关键字的使用和绑定问题，尤其是对于初学者来说，可能会引发错误和困惑。

解决方案：

  • Hooks 使得在函数组件中就能使用状态和其他 React 特性，避免了 this 关键字的复杂性，简化了组件的定义和使用。函数组件更为简单直观，代码量更少，更容易理解和调试。

3. 生命周期方法的缺陷

问题：

  • 类组件中的生命周期方法经常包含不相关的逻辑。例如，componentDidMount 和 componentDidUpdate 可能会包含数据获取和订阅逻辑，不易分离和复用。此外，某些逻辑需要分散在多个生命周期方法中（如清理操作在 componentWillUnmount 中进行），增加了代码的复杂性。

解决方案：

  • useEffect 钩子将副作用逻辑统一在一个地方，并允许将相关逻辑分离成多个 useEffect 调用，使得代码更加清晰和模块化。例如： 
    function MyComponent() {
  useEffect(() => {
    const subscription = someAPI.subscribe();

    return () => {
      subscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    document.title = `Title updated`;

    return () => {
      document.title = `Cleanup title`;
    };
  }, []);
}

4. 无法在函数组件中使用状态和生命周期特性

问题：

  • 在引入 Hooks 之前，函数组件是无状态且无生命周期的，导致开发者在需要状态管理和副作用处理时不得不使用类组件。

解决方案：

  • Hooks 使得在函数组件中可以使用状态（useState）、副作用（useEffect）、上下文（useContext）等特性，增强了函数组件的功能，使其几乎能取代类组件的所有用途。

5. 代码组织和逻辑分离

问题：

  • 类组件中的状态逻辑往往难以分离，导致单个组件中包含大量复杂逻辑，不易维护。

解决方案：

  • Hooks 提供了一种将状态逻辑封装成可复用的自定义 Hooks 的方式，使得代码组织更清晰，逻辑更易于分离和复用。例如： 
    function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  // ...
}

总结

React Hooks 通过引入 useState、useEffect 等钩子，解决了类组件中的复用状态逻辑困难、复杂性高、生命周期方法缺陷等问题，同时使得函数组件更为强大和易用。Hooks 提供了一种更简洁和模块化的方式来管理组件的状态和副作用，极大地提升了代码的可读性和可维护性。

  • vue2，watch和computed区别

在 Vue 2 中，watch 和 computed 是两种用于处理数据响应式的重要机制，它们各自有不同的用途和特点：

Watch

  1. 定义：

    • watch 是 Vue 实例选项，用于观察 Vue 实例的数据变动，并在数据变动时执行相应的函数。

  2. 用途：

    • 当需要在数据变化时执行异步或复杂操作时，通常使用 watch。例如，监听某个数据的变化并发送 AJAX 请求、执行一些计算操作后更新其他数据等。

  3. 语法：

    • watch 可以监听一个数据属性或一个深嵌套的数据对象，并指定回调函数以响应数据变化。

  4. 示例：

    new Vue({
  data: {
    message: 'Hello, Vue!'
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`message changed from ${oldValue} to ${newValue}`);
      // 执行其他操作，如发送请求、更新其他数据等
    }
  }
});

Computed

  1. 定义：

    • computed 是 Vue 实例选项，用于定义一个计算属性。计算属性的值会根据它们依赖的数据动态计算得出，并且会缓存计算结果，只有在相关依赖发生改变时才会重新计算。

  2. 用途：

    • 当需要根据一个或多个响应式数据计算出一个新的衍生值时，通常使用 computed。例如，计算购物车的总价、过滤和排序数据等。

  3. 特点：

    • 计算属性会根据它们的依赖缓存结果，只有在依赖发生变化时才会重新计算，因此计算属性是响应式依赖追踪的一部分。

  4. 语法：

    • computed 属性是一个函数，该函数返回计算的结果。

  5. 示例：

    new Vue({
  data: {
    price: 10,
    quantity: 3
  },
  computed: {
    total() {
      return this.price * this.quantity;
    }
  }
});

区别总结

  • Watch：

    • 适用于监听某个数据的变化，并在数据变化时执行自定义操作，可以处理异步操作和较为复杂的逻辑。
    • 使用 watch 需要显式地声明要监听的数据，并且需要手动处理响应逻辑。

  • Computed：

    • 适用于基于一个或多个响应式数据计算出一个新的衍生值。
    • computed 的值会被缓存，只有相关的响应式数据发生变化时才会重新计算，因此计算属性更适合处理一些需要实时计算的衍生数据。

综上所述，watch 和 computed 在 Vue 2 中各有其特定的用途和优势，根据具体的业务需求和数据操作场景选择合适的方式来处理数据响应式。

  • CDN的原理是什么

内容分发网络（Content Delivery Network，简称 CDN）是一种分布式网络系统，通过将内容缓存到多个地理位置的服务器上来加速网页内容的传输，减少网络延迟和服务器负载，从而提高用户的访问速度和体验。CDN 的工作原理主要包括以下几个方面：

CDN 的工作原理

  1. 分布式架构：

    • 边缘服务器（Edge Server）：CDN 在全球各地分布着大量的边缘服务器，这些服务器靠近用户，缓存用户常访问的内容。用户的请求会被自动引导到离其最近的边缘服务器上。
    • 中心服务器（Origin Server）：存储原始内容的服务器，通常由内容提供商自己管理。边缘服务器会从中心服务器拉取内容，并缓存到本地。

  2. 内容缓存：

    • 缓存机制：边缘服务器会缓存从中心服务器获取的内容。缓存的内容可以是静态资源（如图片、视频、CSS、JavaScript 文件等）和动态内容（如API响应、动态网页等）。
    • 缓存策略：CDN 使用多种缓存策略来决定缓存的内容和时间，包括基于时间的缓存（TTL，Time-To-Live），基于请求的缓存，以及基于用户地理位置的缓存。

  3. 智能路由：

    • DNS 解析：当用户请求访问一个网站时，DNS 解析会将用户引导到最近的边缘服务器。CDN 服务商通常会接管域名的解析过程，以实现智能路由。
    • 负载均衡：CDN 通过负载均衡技术，将请求分发到不同的边缘服务器，避免单个服务器过载，提高整体性能和可靠性。

  4. 内容分发：

    • 内容请求：用户访问内容时，请求会被路由到离用户最近的边缘服务器。如果该服务器已经缓存了所需内容，则直接返回。如果没有缓存，则从中心服务器拉取内容，并缓存到本地后返回给用户。
    • 缓存更新：当原始内容更新时，边缘服务器会根据设定的缓存策略重新拉取最新内容进行缓存。可以使用主动推送、定期刷新等方式来保持缓存内容的最新。

  5. 安全性和优化：

    • 安全功能：CDN 提供多种安全功能，包括 DDoS 防护、Web 应用防火墙（WAF）、SSL/TLS 加密等，保障内容传输的安全性。
    • 性能优化：通过压缩、图像优化、文件合并等技术，进一步提高内容传输速度和用户体验。

CDN 的具体工作流程

  1. 用户请求：

    • 用户在浏览器中输入网站 URL 并发起请求。

  2. DNS 解析：

    • 用户的请求首先经过 DNS 解析。CDN 的 DNS 服务器根据用户的地理位置和网络状况，将请求引导到最近的边缘服务器。

  3. 边缘服务器处理请求：

    • 如果边缘服务器已经缓存了请求的内容，则直接将内容返回给用户。
    • 如果没有缓存，则向中心服务器请求内容，获取后缓存到本地并返回给用户。

  4. 返回内容：

    • 用户从最近的边缘服务器获取到所需内容，完成请求。

优势

  1. 加速访问：通过将内容分发到全球各地的边缘服务器，缩短了用户与服务器之间的物理距离，减少了网络延迟，提高了访问速度。
  2. 降低负载：将请求分散到多个服务器，减少了中心服务器的负载，避免了单点故障。
  3. 高可用性：即使某些边缘服务器出现故障，用户的请求也可以被自动路由到其他可用的服务器，保障了服务的连续性。
  4. 安全性增强：通过集成多种安全功能，CDN 能有效防护各种网络攻击，保障内容传输的安全性。
  5. 成本优化：通过有效的缓存机制，减少了带宽使用和原服务器的负载，从而降低了运营成本。

CDN 是现代互联网基础设施中不可或缺的一部分，通过其分布式架构和智能路由机制，有效提升了内容传输的效率和安全性，极大地改善了用户体验。

  • ES6 模块（ES6 modules）和 CommonJS 模块（CommonJS modules）

ES6 模块（ES6 modules）和 CommonJS 模块（CommonJS modules）是两种不同的 JavaScript 模块系统，它们在语法、加载方式、运行时行为等方面存在一些关键差异。以下是它们的主要区别和特点：

ES6 模块（ES6 modules）

特点

  1. 静态导入和导出：

    • ES6 模块使用 import 和 export 关键字来导入和导出模块。导入和导出在编译时就确定了。
    • 示例： 
      // 导出
export const myVar = 42;
export function myFunc() {
  console.log('Hello, ES6 modules!');
}

// 导入
import { myVar, myFunc } from './myModule.js';

  2. 提升性能：

    • 由于导入和导出是静态的，编译器和工具可以更好地优化代码，比如树摇（tree-shaking），仅打包实际使用的部分。

  3. 异步加载：

    • ES6 模块原生支持异步加载，这对于在浏览器中使用非常有利。浏览器可以并行地加载多个模块。

  4. 模块作用域：

    • 每个模块都有自己的作用域，不会污染全局作用域。模块内部定义的变量是模块私有的。

  5. 顶层的 this：

    • 在 ES6 模块中，顶层的 this 是 undefined。

用法

  • 导出多个值：

    // myModule.js
export const a = 1;
export const b = 2;

  • 导出默认值：

    // myModule.js
const myDefault = { key: 'value' };
export default myDefault;

// main.js
import myDefault from './myModule.js';

CommonJS 模块（CommonJS modules）

特点

  1. 动态导入和导出：

    • CommonJS 使用 require 和 module.exports（或 exports）来导入和导出模块，导入和导出在运行时确定。
    • 示例： 
      // 导出
const myVar = 42;
function myFunc() {
  console.log('Hello, CommonJS!');
}
module.exports = { myVar, myFunc };

// 导入
const { myVar, myFunc } = require('./myModule');

  2. 同步加载：

    • CommonJS 模块是同步加载的，这意味着它们更适合在服务器端环境使用（如 Node.js），因为服务器上的文件是本地的，可以快速访问。

  3. 模块作用域：

    • 同样，CommonJS 模块有自己的作用域，不会污染全局作用域。模块内部定义的变量是模块私有的。

  4. 顶层的 this：

    • 在 CommonJS 模块中，顶层的 this 指向 module.exports。

用法

  • 导出多个值：

    // myModule.js
const a = 1;
const b = 2;
module.exports = { a, b };

  • 导出单个值：

    // myModule.js
const myDefault = { key: 'value' };
module.exports = myDefault;

// main.js
const myDefault = require('./myModule');

主要区别总结

  1. 语法：

    • ES6 模块使用 import 和 export。
    • CommonJS 使用 require 和 module.exports。

  2. 加载方式：

    • ES6 模块是静态加载的，编译时确定依赖关系，支持异步加载。
    • CommonJS 是动态加载的，运行时确定依赖关系，是同步加载。

  3. 使用环境：

    • ES6 模块主要用于前端和现代 JavaScript 环境。
    • CommonJS 主要用于 Node.js 环境。

  4. 优化：

    • ES6 模块更容易进行优化，比如树摇（tree-shaking），因为导入导出是静态的。

  5. 顶层 this：

    • ES6 模块顶层的 this 是 undefined。
    • CommonJS 模块顶层的 this 指向 module.exports。

通过理解这些区别，开发者可以更好地选择适合自己项目的模块系统，并在不同环境中更有效地使用这些系统。

  • 数组转树

将一组包含 id 和 pid（父节点 ID）的数组转换为树形结构是一个常见的问题。可以通过一个递归的方式来构建树。下面是一个实现这个功能的示例代码：

示例数据

假设有以下数组：

const data = [
  { id: 1, pid: null, name: 'Root' },
  { id: 2, pid: 1, name: 'Child 1' },
  { id: 3, pid: 1, name: 'Child 2' },
  { id: 4, pid: 2, name: 'Grandchild 1' },
  { id: 5, pid: 2, name: 'Grandchild 2' },
  { id: 6, pid: 3, name: 'Grandchild 3' },
  { id: 7, pid: null, name: 'Another Root' }
];

转换为树形结构的函数

function arrayToTree(items) {
  const result = [];
  const itemMap = {};

  // 先将所有项放入一个映射中
  items.forEach(item => {
    itemMap[item.id] = { ...item, children: [] };
  });

  // 构建树
  items.forEach(item => {
    const { id, pid } = item;
    const treeItem = itemMap[id];
    if (pid === null) {
      // 如果没有父节点，说明是根节点
      result.push(treeItem);
    } else {
      // 否则找到父节点，并将其作为父节点的子节点
      if (itemMap[pid]) {
        itemMap[pid].children.push(treeItem);
      }
    }
  });

  return result;
}

const treeData = arrayToTree(data);
console.log(JSON.stringify(treeData, null, 2));

解释

  1. 数据映射：

    • 使用一个对象（itemMap）将数组中的每个项映射起来，通过 id 作为键值。
    • 同时为每个项初始化一个 children 数组，用于存储子节点。

  2. 构建树：

    • 遍历原始数组，对于每个项，根据 pid 判断它是根节点还是子节点。
    • 如果 pid 为 null，表示该项是根节点，直接添加到结果数组 result 中。
    • 如果 pid 不为 null，则找到其父节点，并将其作为父节点的子节点，添加到父节点的 children 数组中。

这样，就可以将包含 id 和 pid 的数组成功转换为树形结构。

  • vue中 reactive和ref的区别

在 Vue 3 的组合式 API 中，reactive 和 ref 是两个核心的响应式工具，它们各自有不同的用途和特性。下面是它们之间的主要区别：

reactive

  • 用途：reactive 用于创建一个响应式对象，通常是一个复杂的数据结构，如对象或数组。

  • 特性：

    • 深度响应式：reactive 会对对象的所有嵌套属性创建响应式。
    • 适用于对象和数组：你可以用 reactive 来创建响应式的对象和数组，Vue 会递归地将这些对象和数组的所有嵌套属性变成响应式的。
    • 使用方式：const state = reactive({ count: 0, items: [] })。访问和修改 state 中的属性时，它们会自动更新。

  • 示例：

    javascript
复制代码
import { reactive } from 'vue';

const state = reactive({
  count: 0,
  items: [1, 2, 3]
});

function increment() {
  state.count++;
}

function addItem(item) {
  state.items.push(item);
}

ref

  • 用途：ref 用于创建一个基本类型的响应式引用，例如数字、字符串、布尔值等，或对复杂类型（如对象或数组）创建单一的响应式引用。

  • 特性：

    • 浅层响应式：ref 只会对其包裹的值创建响应式，而不是对其内部的属性进行深度响应。
    • 适用于基本类型和对象：虽然 ref 主要用于基本数据类型，但它也可以用于创建对对象或数组的单一响应式引用。如果需要对对象或数组的内部进行响应式，通常会结合 reactive 使用。
    • 使用方式：const count = ref(0)。访问和修改 count 的值需要通过 .value 属性来完成。

  • 示例：

    javascript
复制代码
import { ref } from 'vue';

const count = ref(0);
const items = ref([1, 2, 3]);

function increment() {
  count.value++;
}

function addItem(item) {
  items.value.push(item);
}

总结

  • reactive：

    • 用于创建复杂的数据结构（对象和数组）的响应式引用。
    • 支持深度响应式，对嵌套属性也能自动响应。

  • ref：

    • 用于创建基本数据类型的响应式引用。
    • 对于对象和数组，ref 只在顶层提供响应式，内部的变化不会自动响应（除非用 .value 修改）。

在实际开发中，选择 reactive 还是 ref 取决于你的数据结构和需求。对于复杂的数据结构或嵌套对象，通常使用 reactive。对于单一值或简单的基本类型，ref 更为合适。

avatar
文章
阅读
粉丝