上一篇我们聊了 React 合成事件的来龙去脉，顺便拆解了一个 WebGPU 推理应用的完整逻辑。今天这篇，我把目光聚焦到组件设计这件事上——借着项目里 Progress 进度条组件的“进化史”。聊聊如何写出健壮、可复用、让使用者爽的组件。

一、那个不起眼的 ?，=暴露了组件设计的“良知”

先来看 Progress 组件主要代码：

const Progress = => {
percentage?，= 0;// 👈 就这一行，看出了封装者的用心
return (


{text}
{percentage.toFixed}%
{isNaN?"" : `of ${formatBytes}`}


)
}

?，= 是 ES2022 引入的逻辑空值赋值运算符. 它等价于：

if {
percentage = 0;}

为什么需要它？怎么说呢，

• Pain Point #1: 父组件刚开始加载数据时{progressItems} 还是空数组。或者某个文件缺少 {percentage} 字段。直接拿 {undefined} 去算宽度会导致页面崩溃或显示 NAN%.
• Pain Point #2: 使用者期望进度条始终能展示可读信息，而不是闪烁或错误。说起来，
• Pain Point #3: 在移动端或网络不稳定时一段时间内无法获取百分比值。但 UI 应该保持稳定，说起来，

有了 ? ∗，=0;,不管外面传来什么妖魔鬼怪。{percentage} 至少是个数字。进度条不会炸，页面不会白屏。

二、State vs Props：数据的两条“河流”

• State：组件自己的“私人管家”

// App.tsx 中 state
const = useState;说起来，const = useState;const = useState;按理说，const = useState;const = useState;

Pain Point #4: 如果把所有状态都放在 props 中。会导致子组件频繁重渲染，影响性能。通过本地 state 控制，只在需要时更新。

• Props：父组件的“传递手”

• A child component reads props but never mutates m.
• If a child needs to modify a prop value it must notify parent via a callback.
• This preserves React’s single‑direction data flow: data downwards,events upwards.
• Pains addressed:
  • #5 – Prevent accidental mutation of shared props.
• #6 – Clear separation of concerns .

三、formatBytes: 一个工具函数的小确幸

An often overlooked helper that turns raw byte counts into human‑readable strings.