🔄 复习日 / Review Day 40

📊 NeetCode: 34/150 · SysDesign: 33/40 · Behavioral: 33/40 · Frontend: 33/50 · AI: 16/30

今天是复习日！回顾过去4天（Day 36–39）的内容。

Today is review day! Let's revisit the past 4 days (Days 36–39).

Topics covered:

• 🏗️ E-Commerce Platform, Ticketmaster, Stripe, Distributed Cache
• 💻 Find Min in Rotated Array, Search in Rotated Array, Time-Based KV Store, Median of Two Sorted Arrays
• 🗣️ Setting technical direction, over-engineering, trade-offs, aligning teams
• 🎨 Memoization Triangle, Virtualization, Code Splitting, Web Vitals
• 🤖 Multimodal AI, Diffusion Models

📝 Quick Quiz — 3 Mini-Reviews

Q1: [🏗️ System Design] — Design a Payment System (Stripe)

在设计支付系统时，为什么要将支付操作设计为幂等的？如果不这样做，会发生什么？

When designing a payment system like Stripe, why must payment operations be idempotent? What happens if they aren't?

<details><summary>显示答案 / Show Answer</summary>

幂等性意味着同一请求执行多次与执行一次的结果相同。在支付场景中，网络超时可能导致客户端不确定请求是否成功——如果重试一个非幂等操作，用户可能被重复扣款。Stripe 通过 Idempotency-Key 请求头来解决这个问题：服务端缓存该 key 对应的响应，重复请求直接返回缓存结果，不重新执行扣款逻辑。

Idempotency means running the same operation multiple times produces the same result as running it once. In payments, network timeouts leave clients uncertain whether a charge succeeded — retrying a non-idempotent operation can double-charge the user. Stripe solves this with an Idempotency-Key header: the server caches the response for that key, and duplicate requests return the cached result without re-executing the charge. Always design financial mutations to be idempotent.

</details>

Q2: [💻 Algorithms] — Binary Search Pattern (Rotated Array / Time-Based KV)

你有一个升序数组但不确定是否被旋转。说出一条规则，帮助你在 O(log n) 内判断 target 在哪一半。

You have a sorted array that may or may not be rotated. State one rule that lets you determine which half contains your target in O(log n).

<details><summary>显示答案 / Show Answer</summary>

关键规则：先判断哪半部分是有序的，再判断 target 是否在有序的那半。

具体做法：计算 mid，然后比较 nums[left] 和 nums[mid]：

• 如果 nums[left] <= nums[mid]，左半部分有序；检查 target 是否在 [nums[left], nums[mid]) 范围内，是则缩短到左半，否则到右半。
• 如果 nums[left] > nums[mid]，右半部分有序；检查 target 是否在 (nums[mid], nums[right]] 范围内，是则缩短到右半，否则到左半。

这个规则适用于 Search in Rotated Sorted Array（#33），也是 Find Minimum（#153）和 Time-Based Key-Value Store 二分答案的基础思路。

The key rule: first determine which half is sorted, then check if the target falls within that sorted half.

Compare nums[left] and nums[mid]: if nums[left] <= nums[mid], the left half is sorted — check if target is in [nums[left], nums[mid]); otherwise, the right half is sorted — check if target is in (nums[mid], nums[right]]. This single rule handles all rotated binary search variants, including the Time-Based KV Store where you binary search on timestamps.

</details>

Q3: [🎨 Frontend] — Memoization Triangle (React.memo, useMemo, useCallback)

以下场景，你会用哪个 API？为什么？

"父组件重新渲染时，传给子组件的一个 onClick 处理函数导致子组件也重新渲染。"

Which memoization API should you use here, and why?

"A parent re-renders and passes an onClick handler to a child, causing the child to re-render unnecessarily."

<details><summary>显示答案 / Show Answer</summary>

需要同时用两个：

1. useCallback — 包裹父组件中的 onClick 函数，确保引用稳定（每次渲染不生成新函数）。
2. React.memo — 包裹子组件，让它只在 props 真正改变时重新渲染。

仅用 useCallback 不够——子组件仍会在父渲染时重渲（除非它是 React.memo 组件）。

仅用 React.memo 也不够——因为没有 useCallback，每次父渲染都会生成新的函数引用，React.memo 的浅比较会认为 prop 变了。

You need both:

1. useCallback — wrap the onClick in the parent to stabilize its reference (same function object across renders).
2. React.memo — wrap the child component so it only re-renders when props actually change.

</details>

💡 复习巩固记忆，螺旋式上升。Review strengthens memory — spiral upward.

📅 明天继续新内容！Tomorrow, back to new content!