前端面试每日三题 - Day 21
这是我为准备前端高级岗位系统整理的第 21 天练习内容，精选三个面试/工作中的高频难点问题：
JavaScript- 探索函数柯里化（Currying）与组合（Compose）技巧React- 分析Server Components的优势与使用限制系统设计实战： 如何设计一个可靠的异地多活系统？
内容精炼实战，涵盖源码原理 + 实际应用 + 架构思维，适合面试前复习/技术沉淀写博客等使用场景。
✅ 题目1： JavaScript - 探索函数柯里化（Currying）与组合（Compose）技巧
🧠 概念解析：
- 柯里化（Currying）：将一个接受多个参数的函数转化为一系列接受单一参数的函数的技术。柯里化的核心优势是可以逐步传递参数，适合高阶函数和部分应用。
- 组合（Compose）：是将多个函数组合为一个新的函数，数据从左到右依次传递。它的主要作用是简化代码逻辑，提升可组合性，通常用于函数式编程。
🛠️ 实际应用：
- 柯里化常用于提高函数的复用性和灵活性，尤其在处理复杂事件、配置管理或需要多次调用相似功能时很有用。
- 组合常见于将复杂操作拆解成小而简单的函数，尤其在 React 中，类似 HOC（高阶组件）的使用方式，避免了重复的逻辑。
💻 示例代码：
// 柯里化示例
const add = (a) => (b) => a + b;
const add5 = add(5);
console.log(add5(3)); // 输出 8// 组合示例
const compose = (...functions) => (x) => functions.reduceRight((v, f) => f(v), x);
const add1 = (x) => x + 1;
const multiply2 = (x) => x * 2;
const add1ThenMultiply2 = compose(multiply2, add1);
console.log(add1ThenMultiply2(5)); // 输出 12
✅ 题目2：React - 分析 Server Components 的优势与使用限制
🧠 概念解析：
- Server Components 是 React 18 引入的一项新特性，允许开发者将一些组件渲染在服务器端，而不需要将其传递给客户端。此技术能有效减少客户端的负载，提升首屏加载速度。
- 它与传统的 客户端渲染（CSR）相比，能够优化应用的性能，并减少初始加载时的 JavaScript 体积。
💪 优势：
- 减少客户端负担：将非交互式组件转移到服务器，避免加载不必要的 JavaScript，提升首屏渲染速度。
- SEO 改善：由于组件是服务器渲染的，搜索引擎能够更好地抓取页面内容，提升 SEO 性能。
- 小包体积：仅加载客户端需要的 JavaScript 代码，避免下载不必要的内容。
⚠️ 限制：
- 无法访问浏览器 API：Server Components 无法访问浏览器特有的 API（如
window和document），因此只能处理与 UI 无关的业务逻辑。 - 生态尚不完善：当前生态中，Server Components 仍在不断完善，兼容性和工具链的支持相对不足。
💻 示例代码：
// Server Component 示例
const fetchData = async () => {const res = await fetch('https://api.example.com/data');return res.json();
};const ServerComponent = async () => {const data = await fetchData();return <div>{data.message}</div>;
};
✅ 题目3：系统设计 - 如何设计一个可靠的异地多活系统？
🧠 概念解析：
- 异地多活系统（Multi-Active Data Centers）指的是在不同地域的数据中心中部署完全相同的应用和数据，使得在某一数据中心出现故障时，其他数据中心能够接管流量，保障服务持续运行。
- 目标是实现 高可用性、容错性 和 灾备能力，避免单点故障带来的影响。
⚙️ 关键设计点：
- 数据同步：使用分布式数据库或消息队列（如 Kafka）进行数据同步，保证数据的一致性和实时性。
- 负载均衡：设计智能负载均衡策略，根据各地数据中心的健康状态动态分配流量。
- 故障切换机制：通过 DNS 轮询、全局负载均衡等方式，确保在数据中心发生故障时能够平滑切换。
- 实时监控与报警：通过监控工具（如 Prometheus）监测各数据中心的状态，及时响应故障和性能问题。
🛠️ 技术栈：
- 使用 Kubernetes 来进行容器管理和应用调度，实现高可用的服务部署。
- 采用 Kafka 或 Pulsar 进行数据异地同步。
- 使用 CDN 加速数据访问，确保全球用户的请求响应速度。
💻 示例架构：
[Data Center A] <--> [Data Center B] <--> [Load Balancer] <--> [User Requests](Replication) (Failover)
📅 明日预告：
- JavaScript-深入理解
Set和Map数据结构 - React-了解 Suspense 和 Concurrent Mode 的工作原理
- 系统设计 - 构建一个高可用的视频直播架构