收集的单词
source folder：src文件夹
slash：/
backslash：反斜杠，\
tag：标签（HTML用语）
subfolder：子文件夹
square brackets：中括号
destructure：解构
hyphen：-
refresh：刷新
underscore：下划线
percentage：%
parentheses：/pəˈrenθəsiːz/ 小括号
invoke：调用
pass in params：传入参数
underscore：_ ，下划线
conditional statements：判断条件语句
pipe：管道，管道符 |
backticks：反引号，`
port：端口
crash course：速成课程
variant：变体
asterisk：/ˈæstərɪsk/ 星号，就是form里面必填项前面的星号
ternary operator：三元运算符
angle brackets：<> 尖括号
mandatory：强制的（比如说form里面的必填项，可以说required，也可以说是mandatory）
refactor：重构
tweak：/twiːk/ to make usually small adjustments in or to，小调整，一般用在调试参数这些场景
hype：炒作。在twitter上经常有很多推文，说why I move from nextjs to tanstack start 这些。评论里面就会说是hype，炒作。
obsolete：/ˌɑːbsəˈliːt/ no longer in use or no longer useful。过时的。
memoize：记忆化：在计算机编程中，一种优化技术，通过将昂贵的函数调用的结果存储起来，以便在后续调用时直接返回结果，从而避免重复计算。是memo + ize的组合，并不是从memory直接过来的。
- “memo-” 来自拉丁语 “memor”（意为“记忆的”），与英语单词 memory（记忆）、memorial（纪念物）同源。
- “-ize” 是常见的动词化后缀，表示“使……化”或“实行……行为”（如 realize、optimize）。
组合起来，memoize 的字面意思就是 “使记忆化” 或 “存入记忆”。
该词最早由人工智能先驱 Donald Michie 在1968年的论文《Memo Functions and Machine Learning》中创造，用于描述一种缓存函数计算结果以避免重复运算的优化技术
Michie 特意选用 “memoize”（而非 memorize）来区别于日常的“记忆”，强调其技术性的缓存含义。
defer：延期，推迟；听从，遵从（defer to）。这个经常用在计算机里面，表示推迟某些代码的执行，注意不要和different搞混了，虽然读音类似，但是词根完全不同，意思完全不同。
sync：/sɪŋk/ 同时，同步；协调，一致；（=synch）同时，同步
async：/əˈsɪŋk/ 异步
synchronous：/ˈsɪŋkrənəs/ 同时的，同步的
asynchronous：/eɪˈsɪŋkrənəs/ 异步的；不同时的；
incognito：/ˌɪnkɑːɡˈniːtoʊ/ 伪装的，隐姓埋名的。（计算机）浏览器无痕浏览模式
prompt：/prɑːmpt/ 促使，导致；鼓励，提示（说话者）；（计算机上）提示
unidirectional：/ˌjunədəˈrekʃənəl/ 单向的；单向性的
via：/ˈvaɪə/ prep. 经由，经过（某一地方）；通过，借助于（某种手段或人）
portal：/ˈpɔːrtl/ 建筑物的）壮观的大门，正门；门户网站
intact: /ɪnˈtækt/ 完好无损的
reconciliation：/ˌrekənsɪliˈeɪʃ(ə)n/ 协调，和谐一致；
__proto__：读作 dunder proto /ˈdʌndər ˈproʊtoʊ/ 或者 double underscore proto
resolve：解决（问题或困难）；决定，下定决心
solve：解决，处理；解释，解答
「resolve」和「solve」都有“解决”的含义，但侧重点和使用场景有明显区别。
solve → 强调找到正确答案或解决方案，通常针对具体问题、谜题、方程，结果往往是确定的、唯一的。 resolve → 强调消除分歧、疑虑或复杂性，使问题得到终结，通常针对矛盾、冲突、争议、危机，结果往往是达成一致或恢复稳定。
计算机中各种符号的英语口语读法
在技术交流、结对编程（Pair Programming）或者技术面试中，准确读出代码中的符号不仅能让沟通更高效，也会显得你非常专业。
以下我为你整理了前端开发（尤其是 JavaScript/TypeScript）中高频出现的各种符号的英语口语读法，分为逻辑与比较、变量与赋值、现代语法特性以及基础标点。
一、 比较与逻辑运算符 (Comparison & Logical)
| 符号 | 英语口语读法 | 程序员大白话 / 说明 |
|---|---|---|
== | Double equals / Equals | 宽松相等（不推荐使用） |
=== | Triple equals / Strictly equals | 全等 / 严格相等（JS/TS 最常用） |
!= | Not equals | 不等于 |
!== | Strictly not equals | 严格不等于 |
> / < | Greater than / Less than | 大于 / 小于 |
>= / <= | Greater than or equal to / Less than or equal to | 大于等于 / 小于等于 |
&& | And / Double ampersand | 逻辑与。口语直接说 And 即可 |
|| | Or / Double pipe | 逻辑或。口语直接说 Or |
! | Not / Bang | 取反 / 感叹号。在技术圈常被称为 Bang（如：!true 读作 Bang true） |
二、 赋值与数学运算符 (Assignment & Math)
| 符号 | 英语口语读法 | 程序员大白话 / 说明 |
|---|---|---|
= | Equals / Assigns | 赋值号（不要和全等混淆） |
+= / -= | Plus equals / Minus equals | 加等于 / 减等于 |
++ / -- | Plus plus / Minus minus | 自增 / 自减 |
+ / - | Plus / Minus | 加 / 减 |
* / / | Times (or Asterisk) / Divided by (or Slash) | 乘（口语常用 Times，符号本身叫 Asterisk） / 除 |
% | Modulo / Mod | 取模 / 取余 |
** | To the power of / Double asterisk | 幂运算（如 2 ** 3 读作 2 to the power of 3） |
三、 现代 JS / TS 语法特性 (Modern Features)
这些是现代全栈开发（Next.js / React）中最常挂在嘴边的符号：
| 符号 | 英语口语读法 | 程序员大白话 / 说明 |
|---|---|---|
=> | Arrow / Fat arrow | 箭头函数（如 () => {} 读作 Arrow function） |
... | Spread / Rest (or Dot-dot-dot) | 三个点。作展开运算符时读 Spread，作剩余参数时读 Rest |
?. | Optional chaining | 可选链（如 user?.name 读作 User optional chaining name） |
?? | Nullish coalescing | 空值合并运算符（如 a ?? b 读作 A nullish coalescing B） |
${} | Template literal / String interpolation | 模板字符串变量槽 |
四、 基础标点与括号 (Punctuation & Brackets)
括号千万不要读错，各种括号在英文里区分非常严格：
| 符号 | 英语口语读法 | 程序员大白话 / 说明 |
|---|---|---|
() | Parentheses / Parens | 小括号 / 圆括号（最常用简写 Parens） |
[] | Brackets / Square brackets | 中括号 / 方括号（直接说 Brackets 默认指方括号） |
{} | Curly braces / Braces | 大括号 / 花括号（直接说 Braces 默认指花括号） |
. | Dot / Period | 点（如 obj.prop 读作 obj dot prop） |
, | Comma | 逗号 |
; | Semicolon | 分号 |
: | Colon | 冒号 |
? | Question mark | 问号（常用于三元运算符：Ternary operator） |
' ' / " " | Single quotes / Double quotes | 单引号 / 双引号 |
| Backticks | 反引号（模板字符串使用的符号） |
_ | Underscore | 下划线 |
- | Hyphen / Dash | 连字符 / 短横线（如 kebab-case 里的横线） |
/ | Slash / Forward slash | 斜杠 |
\ | Backslash | 反斜杠 |
# | Hash / Pound / Sharp | 井号（C# 里的 Sharp，CSS 选择器里的 Hash） |
💡 实战口语小例子：
如果你想在结对编程时指导队友写一句代码：
- 代码：
const user = data?.items?.[0] ?? {}; - 你可以说： "Let's define a constant
userequalsdataoptional chainingitemsoptional chaining bracket0nullish coalescing curly braces."
有了这一套词汇，你在跟外国同行或是外企面试官沟通代码时，就能非常流利自然了！
一些专业术语
没问题！刚才为了方便你记忆做了精简，现在我为你梳理一份最全面、最系统的前端远程（Remote）面试高频术语大表。
我把它们分门别类整理成了表格，涵盖了从 JavaScript/TypeScript 进阶、React 核心机制、Next.js 架构，到 Web 性能优化和远程团队日常黑话（Collaboration）。每一个都附带了地道的英文口语定义，方便你直接在面试中组织语言。
一、 JavaScript / TypeScript 进阶术语 (JS/TS Core)
| 术语 (Terminology) | 英文标准口语定义 (Interview Definition) | 中文核心含义 / 面试痛点 |
|---|---|---|
| Destructuring | Unpacking values from arrays or properties from objects into distinct variables. | 解构赋值。提取对象/数组属性。 |
| Immutability | The principle that data cannot be changed after creation; updating state requires creating a new copy. | 不可变性。React 状态更新的核心根基。 |
| Closure | A function that remembers and accesses variables from its outer scope even after the outer function has executed. | 闭包。Hook（如 useState）底层的核心机制。 |
| Debounce | Delays a function execution until a certain amount of time has passed since the last call (e.g., search inputs). | 防抖。连续触发时，只执行最后一次。 |
| Throttle | Limits the execution of a function to once every specified time interval (e.g., window resizing). | 节流。控制一段时间内执行的频率。 |
| Asynchronous | Code execution that allows long-running tasks to perform in the background without blocking the main thread. | 异步。非阻塞代码流（Async/Await）。 |
| Generics | A TypeScript feature that allows creating reusable components/functions that work with a variety of types. | 泛型。TS 中实现类型复用的核心。 |
二、 React 核心机制与模式 (React Paradigm)
| 术语 (Terminology) | 英文标准口语定义 (Interview Definition) | 中文核心含义 / 面试痛点 |
|---|---|---|
| Re-rendering | React calling the component function again to update the Virtual DOM when state or props change. | 重新渲染。UI 更新机制，高频优化点。 |
| Side Effect | Any operation that affects something outside the scope of the function, such as API fetching or DOM updates. | 副作用。组件渲染之外的操作（用 useEffect）。 |
| Prop Drilling | Passing data through multiple layers of intermediate components that don't actually need the data. | Prop 穿透/钻孔。状态层级太深导致的痛点。 |
| Custom Hook | A reusable JavaScript function whose name starts with "use", encapsulating shareable and stateful logic. | 自定义 Hook。逻辑复用、抽离逻辑的首选方案。 |
| State Co-location | Moving state as close to where it’s actually being used as possible to prevent unnecessary re-renders. | 状态就近原则。一种常见的 React 性能优化手段。 |
| Controlled Component | A component where the form data is handled by the React state, not the DOM itself. | 受控组件。由 React 的 state 控制输入的组件。 |
| Uncontrolled Component | A component where form data is handled by the DOM, usually accessed using a useRef. | 非控组件。通过 ref 直接读取 DOM 值的组件。 |
| Context API | A built-in React feature to share global state across the component tree without prop drilling. | Context 上下文。React 内置的轻量全局状态管理。 |
三、 Next.js 架构与全栈特性 (Next.js & Full-stack)
| 术语 (Terminology) | 英文标准口语定义 (Interview Definition) | 中文核心含义 / 面试痛点 |
|---|---|---|
| Hydration | The process where client-side JavaScript attaches event listeners to the server-rendered static HTML. | 注水 / 水合。让服务端渲染的死 HTML 活过来的过程。 |
| Server Actions | Asynchronous functions executed on the server that can be invoked directly from Client Components. | 服务端动作。Next.js 允许你在前端直调后端函数。 |
| RSC (Server Components) | React components that render exclusively on the server, reducing the client-side JavaScript bundle size. | 服务端组件。Next.js App Router 默认组件，零客户端体积。 |
| RCC (Client Components) | Interactive components that are hydrated on the client, marked with the "use client" directive. | 客户端组件。带交互、有状态、有生命周期的组件。 |
| SSR (Server-Side Rendering) | Dynamically generating the HTML on the server for every single incoming user request. | 服务端渲染。用户每次请求时实时动态生成页面。 |
| SSG (Static Site Generation) | Pre-rendering pages into static HTML at build time, resulting in ultra-fast page loads. | 静态网站生成。打包构建时就生成好静态文件。 |
| ISR (Incremental Static Regeneration) | Updating specific static pages in the background after the site has been built, without a full rebuild. | 增量静态再生。不重新打包的前提下，增量更新静态页。 |
| Route Handlers | Next.js API endpoints built using standard web Request and Response APIs (replacing API Routes). | 路由处理程序。Next.js 里写自定义 API 接口的地方。 |
四、 前端性能优化术语 (Performance Optimization)
| 术语 (Terminology) | 英文标准口语定义 (Interview Definition) | 中文核心含义 / 面试痛点 |
|---|---|---|
| Code Splitting | Splitting the JavaScript bundle into smaller pieces so users only download the code needed for the current page. | 代码分割。避免一次性加载过大的 JS 文件。 |
| Lazy Loading | Delaying the loading of non-critical resources (like images or heavy components) until they are needed. | 懒加载 / 惰性加载。用到时再加载（如 next/dynamic）。 |
| Memoization | Caching the results of expensive function calls to avoid redundant computations (using useMemo / memo). | 记忆化缓存。防止组件无意义的重复计算和渲染。 |
| Tree Shaking | A build optimization technique that removes dead or unused code from the final bundle. | 摇树优化。打包时自动剔除没用到的死代码。 |
| CLS (Cumulative Layout Shift) | A Core Web Vital metric that measures the visual stability of a webpage during loading. | 累计布局偏移。衡量页面乱跳的指标（用图片宽高固定解决）。 |
| FCP / LCP | First Contentful Paint / Largest Contentful Paint; metrics measuring how fast page elements render. | 首屏/最大内容渲染时间。衡量页面加载速度的核心指标。 |
五、 远程工作与团队协作黑话 (Remote Tech Culture)
远程面试中，这些词能证明你“不需要带，具备极其成熟的团队异步协作经验”：
| 术语 (Terminology) | 英文标准口语定义 (Interview Definition) | 中文核心含义 / 真实语境 |
|---|---|---|
| Tech Debt | Suboptimal code written to meet a tight deadline, which requires refactoring later. | 技术债。赶进度写出的糙代码，事后需要还债（重构）。 |
| Backlog | A prioritized list of tasks, features, or bug fixes that the team plans to work on in the future. | 需求积压/任务池。还没做但写在 Jira 里的开发看板任务。 |
| Refactor | Restructuring existing code to improve its internal quality without changing its external behavior. | 重构。不改变外部功能的前提下优化内部代码质量。 |
| Asynchronous Communication | Communicating through messages, comments, or documentation without expecting an immediate response. | 异步沟通。远程工作灵魂：通过 Slack/Jira 留言，不强求秒回。 |
| Blocker | Any issue or dependency that prevents a developer from making progress on their task. | 阻碍因素。卡住你进度的东西（开会时要主动提）。 |
| Alignment / Align | Ensuring all team members share the same understanding of a goal, design, or implementation. | 对齐/达成共识。产品、设计、前端三方对齐目标。 |
| Ship | To deploy a feature or product live to the production environment so users can interact with it. | 上线 / 发布。老外极少说 "go live"，100% 会说 "ship it"。 |
| PR (Pull Request) Review | The process where peers review code changes before they are merged into the main branch. | 代码审查 / 审 PR。远程团队保证代码质量的核心日常。 |
💡 怎么复习效果最好？
面试前，试着拿这个表格里的英文定义和你的 STAR 案例做串联。
- 比如：“为了赶 Deadline，我们引入了一点 Tech Debt，先用 Prop Drilling 把功能跑通并 Shipped 了。第二周我们通过 Refactor，把逻辑抽离成 Custom Hook，做好了 State Co-location，顺便通过 Code Splitting 优化了 LCP 性能。”
这一句话里叠满了术语 Buff，面试官听了绝对会觉得你是一个极具经验的 Senior 工程师。
在app文件夹里面创建products文件夹
let's create a new folder called products within the app folder.
在products文件夹里面创建page.tsx文件
inside the products folder, we create a new page.tsx file.
在这个文件中，创建一个组件
in this file, we will define a component, which name is Home.
提取出id，获取详情数据
extract product id and perform some action such as making an API call to fetch the details for that product.
让我们指定params参数的类型
let's specify the type of params as follows.
在编写代码的时候，动作有时候不需要说出来，比如说：这里写一个冒号，写一个大括号，里面写params参数，然后写一个对像......，可以直接说名词，边说边写，别人就知道是什么意思。
比如说下面这个动作，烙印是这样讲解的：
It's a typescript error.let's specify the type of params as follows,colon,curly braces,params is an object,with a key called productId of type string.typescript is satisfied.
在组件中插入这个函数，并传参
inside the component we invoke this function and passing 2 as the argument.