Back to blog

Blocks 与 Components:重构之后什么会留下

Nov 3, 2026VrmMate Team

这个模板里最值得先理解的一处分界,决定了换品牌时哪些代码能存活。

blocks 与 components 的分界,是这个模板里最值得先理解的设计。

规则本身

一个文件如果读取翻译、拼装内容配置,它就是 block;如果所有内容都通过 props 传入,它就是 component。block 知道产品,component 什么都不知道。

为什么不是审美问题

换品牌时,存活下来的是 component。定价表、侧边栏、表格、表单这些原语不会因为文案变化而重写;hero、features 之类的 demo block 通常整块删掉。把业务逻辑塞进 component,等于把可复用的部分也一起扔了。

落地方式

index.tsx 只做组合:把新的 block 摆成页面。翻译键统一放在 landing.* 下,中英文同步添加,避免出现只改一边的半成品。

检查清单

新增文件时先问:它需要翻译吗?需要就放 blocks,不需要就放 components,别两头都粘。