前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载导读在 React Server ComponentsRSC架构下服务端组件向客户端组件传递 props 时所有数据都会被序列化后嵌入 HTML 或 RSC 响应流中。本篇文章基于仓库中 Vercel React 最佳实践规则 server-dedup-props.md系统讲解 RSC→客户端序列化的按对象引用去重机制、会被重复序列化的典型反模式以及服务端只传一次、客户端再做变换的正确写法帮助你在编写 RSC 组件时精确控制网络载荷。一、先理解 RSC 序列化的去重规则按引用不按值RSC→客户端的序列化去重依据是对象引用object reference而非值value同一引用被传入多个 props只序列化一次客户端通过引用复用同一份数据每次生成新引用的数据即使内容完全相同也会被当作新数据再次序列化重复内容会被完整地嵌入响应中。这意味着usernames和usernames.toSorted()虽然内容一致但toSorted()会返回一个全新的数组引用于是同一份数据在响应里出现了两次网络载荷随之翻倍。这正是本规则命名的由来避免在 RSC props 中出现重复序列化duplicate serialization。该规则在仓库中的完整定位是服务端性能Server-Side PerformanceHIGH 优先级分类下的server-前缀规则之一与 server-serialization.md最小化边界序列化数据量形成互补前者解决传了什么、传多少的问题后者解决同一份数据传了几遍的问题。二、反模式示例同一数组被序列化两次看下面这段 RSC 代码它是本规则标注的错误写法// RSC: sends 6 strings (2 arrays × 3 items) ClientList usernames{usernames} usernamesOrdered{usernames.toSorted()} /假设usernames是包含 3 个用户名的数组这里的usernamesOrdered{usernames.toSorted()}产生了一个全新的数组引用。去重机制无法识别出它与usernames内容相同因此整个数组被序列化了两次usernames本身 → 3 个字符串usernames.toSorted()的结果 → 又 3 个字符串。最终 RSC 响应里发送了 6 个字符串而客户端实际只需要一份数据。数组越大这种浪费越明显且与 React 的 memo 化机制无关——即使客户端组件被 memo 包裹序列化发生在服务端渲染阶段重复内容已经写入了响应。三、正确写法服务端传一次客户端负责变换本规则给出的正确写法是把排序、过滤、映射这类派生变换挪到客户端执行// RSC: send once ClientList usernames{usernames} / // Client: transform there use client const sorted useMemo(() [...usernames].sort(), [usernames])要点拆解RSC 只传原始引用usernames{usernames}只产生一次序列化发送 3 个字符串客户端用useMemo做派生[...usernames].sort()在客户端基于 props 计算排序结果配合依赖数组[usernames]避免不必要的重复计算参考仓库中 rerender-derived-state.md 的派生状态思想注意浅拷贝[...usernames]先创建副本再sort()避免就地修改原始 propsprops 应当是只读的。从源码结构看这条规则对 React 19 与 Next.js App Router 场景均适用toSorted()本身是 ES2023 的不可变排序方法不会修改原数组返回新引用但正是这个新引用触发了重复序列化。四、嵌套去重行为去重是递归的但影响因类型而异RSC 序列化去重是递归的数组内部的对象元素也会参与引用去重。这带来了一个容易被忽略的细节——重复序列化的实际开销取决于数组元素类型// string[] - duplicates everything usernames{[a,b]} sorted{usernames.toSorted()} // sends 4 strings // object[] - duplicates array structure only users{[{id:1},{id:2}]} sorted{users.toSorted()} // sends 2 arrays 2 unique objects (not 4)规则原文对此给出了明确的影响分级数据类型影响级别重复序列化的内容string[]、number[]、boolean[]HIGH数组结构 所有基础类型元素全部重复object[]LOW数组结构重复但嵌套对象按引用去重不会重复以object[]为例users与users.toSorted()是两个数组引用因此数组本身会被序列化两次但数组内部的对象{id:1}、{id:2}仍然是同一批引用递归去重后每个对象只序列化一次。结果是2 个数组外壳 2 个唯一对象而不是 4 份完整对象。理解这一点的实战意义在于排查重复序列化时不能只看字节数还要看元素类型。字符串/数字数组重复会带来近乎翻倍的载荷而对象数组重复的主要成本集中在数组外壳与索引结构上。五、哪些操作会破坏去重创建新引用清单去重机制本身是按引用工作的因此任何创建新引用的操作都会破坏去重。规则给出了两份清单数组类操作产生新数组引用.toSorted()—— 返回排序后的新数组.filter()—— 返回过滤后的新数组.map()—— 返回映射后的新数组.slice()—— 返回切片后的新数组[...arr]—— 展开运算符创建新数组对象类操作产生新对象引用{...obj}—— 对象展开Object.assign()—— 合并/复制structuredClone()—— 深拷贝JSON.parse(JSON.stringify())—— 序列化往返一个典型的双重浪费场景是// ❌ Bad C users{users} active{users.filter(u u.active)} / C product{product} productName{product.name} /users.filter(...)产生新数组引用 → 数组被重复序列化productName{product.name}看似只是取了一个字段但实际上把product和product.name两处数据都传给了客户端字符串属性本身被单独序列化了一次而product对象里又包含了同样的name。六、推荐的修正形态只传原始引用客户端再做派生规则给出的正确形态是把过滤、解构都推迟到客户端// ✅ Good C users{users} / C product{product} / // Do filtering/destructuring in client对应的客户端写法示例use client function C({ users, product }) { const activeUsers useMemo( () users.filter((u) u.active), [users] ) // 需要 name 时直接从 product.name 读取无需单独传 productName return div{product.name}/div }这样 RSC 只序列化原始引用一次activeUsers的过滤计算和product.name的字段读取都发生在客户端网络载荷保持最小。这与相邻规则 server-serialization.md 的只传客户端实际使用的字段原则相互印证——那条规则强调减少字段数量本规则强调避免同一数据重复出现两者应组合使用。七、例外情况何时仍然值得在服务端派生规则同时明确给出了例外当变换成本很高、或客户端不需要原始数据时可以传派生数据。例如以下场景在服务端派生是合理的变换涉及大数据集排序/聚合在服务端一次性计算比把原始数据全量传给客户端再算更省带宽客户端只需要派生结果如只显示前 10 名传原始数组反而浪费变换依赖服务端上下文如权限过滤、个性化排序客户端无法独立完成。此时要意识到这不再是去重的范畴而是最小化序列化数据量server-serialization的决策——两者的权衡点是一致的payload 大小 vs 计算位置。八、与仓库中其他去重机制的分工去重在仓库的 Vercel React 最佳实践中是一个完整主题本规则只是其中一环可以横向对比理解规则文件去重层级解决什么server-dedup-props.mdRSC props 序列化同一数据被重复序列化进响应server-cache-react.md单请求内函数调用同一请求内重复执行 DB 查询/鉴权React.cache()client-swr-dedup.md客户端网络请求多个组件实例重复请求同一 APISWR三者分别作用于序列化输出服务端数据获取客户端数据获取三个不同阶段。值得一提的是 server-cache-react.md 与本文的对照关系React.cache()按参数值Object.is浅比较去重函数调用而 RSC 序列化按引用去重对象机制不同、场景不同但目标一致——减少重复数据在请求链路中的流转。总结编写 RSC 组件时请把以下三条当作默认习惯传原始引用同一份数据只通过一个 prop 传入客户端组件不传它的副本变体客户端做派生排序、过滤、映射、字段提取等变换移到客户端配合useMemo完成按类型评估影响字符串/数字数组的重复序列化影响最大HIGH对象数组因递归去重影响较小LOW但无论如何都应避免。这套规则在仓库中的依据见 server-dedup-props.md 原文及其在汇总文档 AGENTS.md 中的第 3.2 节可直接作为团队代码评审与 AI 辅助重构的检查清单使用。赞分享前端教程【免费下载链接】preguntas-entrevista-reactPreguntas típicas sobre React para entrevistas de trabajo ⚛️项目地址https://gitcode.com/gh_mirrors/pr/preguntas-entrevista-react点击查看免费下载相关推荐Polar 项目实战RSC Props 重复序列化优化——按引用去重避免重复传输数据Polar 项目实战RSC Props 重复序列化优化——按引用去重避免重复传输数据 本篇技术指南围绕 Polar 仓库内 Vercel React Bes后端前端金融科技RSC Props 序列化去重实战在 Comp AI CRM 中避免 React Server Components 重复传输数据RSC Props 序列化去重实战在 Comp AI CRM 中避免 React Server Components 重复传输数据 React Server后端前端CRM人工智能AI AgentRSC Props 重复序列化规避指南OpenMetadata 工程中的 server-dedup-props 实战解析RSC Props 重复序列化规避指南OpenMetadata 工程中的 server dedup props 实战解析 导读 本文聚焦 React Serv数据目录数据血缘数据治理后端MCP 服务上一篇终极音乐整合方案一键解决跨平台版权困扰下一篇Lizard开发者指南API接口全解析与集成示例创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考