收集的单词
source folder：src文件夹
tag：标签（HTML用语）
subfolder：子文件夹
destructure：解构
refresh：刷新
underscore：下划线
percentage：%
invoke：调用
pass in params：传入参数
underscore：_ ，下划线
conditional statements：判断条件语句
pipe：管道，管道符 |
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 /ˌkoʊəˈlesɪŋ/ | 空值合并运算符（如 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 性能。”
函数式编程术语
一、 基础篇：函数的声明、调用与传参 (Declaration, Invocation & Arguments)
| 英文术语 / 短语 | 中文含义 | 开发者大白话解释 / 核心场景 |
|---|---|---|
| Declare a function | 声明/定义一个函数 | 写下函数的具体实现代码。如 function greet() {}。 |
| Invoke a function / Call a function | 调用/执行一个函数 | 让函数跑起来。如执行 greet()。 |
| Pass in parameters / arguments | 传入参数 | 把数据喂给函数。如 add(5, 10) 传入了两个参数。 |
| Accept arguments | 接收参数 | 函数定义时声明自己要什么。如 function add(a, b) 负责接收参数。 |
| Return a value | 返回一个值 | 函数执行完后，把结果“吐”出来。如 return true;。 |
| Invoke the callback function | 调用回调函数 | 某个操作完成后，回头去执行传进来的那个工具人函数。 |
| Anonymous function | 匿名函数 | 没有名字的函数，常用于临时消费。如 () => {}。 |
| Arrow function | 箭头函数 | ES6 引入的简写函数语法。如 const log = () => {}。 |
| Function scope | 函数作用域 | 函数内部的独立空间，里面声明的变量外面访问不到。 |
| Global variable | 全局变量 | 暴露在最外层的变量，任何地方都能改，极易引发 Bug。 |
二、 行为篇：数据如何流转与变化 (Data Flow & Mutations)
| 英文术语 / 短语 | 中文含义 | 开发者大白话解释 / 核心场景 |
|---|---|---|
| Pass by value | 值传递 | 复制一份基本类型（如数字、字符串）给函数，怎么改都不影响原件。 |
| Pass by reference | 引用传递 / 址传递 | 把对象或数组的引用传给函数，函数内部一改，外部真身也会变。 |
| State mutation | 状态篡改 / 突变 | 直接去修改原始数据。如 user.age = 20（函数式编程不提倡）。 |
| Immutability | 不可变性 | 数据一旦创建就不能改。想改？复制一份新的。React 状态更新的核心。 |
| Side effects | 副作用 | 函数在算结果的同时，悄悄干了别的事（如改了全局变量、发了 API 请求）。 |
| Pure function | 纯函数 | 相同的输入永远得到相同的输出，且绝对没有副作用的“老实人”函数。 |
三、 进阶篇：高级函数特性 (Higher-Order Features)
| 英文术语 / 短语 | 中文含义 | 开发者大白话解释 / 核心场景 |
|---|---|---|
| First-class citizens | 一等公民 | JavaScript 中函数的至高地位：可以当变量赋值，可以当参数传递。 |
| Higher-order function (HOF) | 高阶函数 | 满足“接收函数作为参数”或“返回一个新函数”的函数（如 .map()）。 |
| Callback function | 回调函数 | 作为参数传给别人的那个函数，等别人在合适的时间回头调用它。 |
| Closure | 闭包 | 内部函数记住了外部函数的局部变量，即便外部函数执行完也不会销毁。 |
| Currying | 柯里化 / 链式拆分 | 把 add(1, 2) 拆成 add(1)(2) 的分步接收参数的调用方式。 |
| Partial application | 偏函数应用 / 局部应用 | 先传一部分参数把函数固定住，剩下的参数等以后再传（如用 bind 预设）。 |
四、 哲学篇：编程范式与优化 (Paradigms & Optimizations)
| 英文术语 / 短语 | 中文含义 | 开发者大白话解释 / 核心场景 |
|---|---|---|
| Declarative programming | 声明式编程 | 只告诉计算机“我要什么结果”，不关心过程。如 .map(), SQL。 |
| Imperative programming | 命令式编程 | 一步步教计算机怎么做，写满了 for 循环和 if 判断的保姆式写法。 |
| Referential transparency | 引用透明性 | 函数调用的表达式可以直接被它的计算结果替换，而不影响程序。 |
| Idempotence | 幂等性 | 用同样的参数调用一个函数一次和一万次，产生的后果和世界状态完全一样。 |
| Memoization | 记忆化缓存 | 算过的题把结果记在缓存里，下次再遇到直接拿结果，不重复计算。 |
| Pipeline / Pipe | 管道 / 流水线 | 数据像在传送带上一样，连续穿过多个函数加工，前一个的输出是下一个的输入。 |
在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.