React 组件设计的三个层次：从类型约束到状态归属，再到纯展示

至于写在前面，一个组件。两种写法，天壤之别

痛点：一样的需求，代码实现却相差千里导致后期维护成本爆炸。

假设你要实现一个使用者名编辑功能：页面上显示当前使用者名。有一个输入框可以编辑，点“Update”按钮提交。

V1的观点是，父组件掌管一切

// App.tsx
const App = => {
const = useState;const = useState;const setUsernameState = => {
setName;}，return (
<>


);}，

// NameEditingComponent.tsx
interface Props {
editingName: string;onNameUpdated: => void;说起来，onEditingNameUpdated: => void;disabled: boolean;}
const NameEditingComponent: React.FC = => {
const onChange = => {
props.onEditingNameUpdated;}，const onNameSubmit = => {
props.onNameUpdated;}，return (
<>

Update
);}，

从V2来看，子组件自己管自己

// App2.tsx
const App = => {
const = useState;return (
<>


);}，

// NameEditComponent.tsx
interface Props {
initialUsername: string;onNameUpdated: => void;}
const NameEditComponent: React.FC = => {
const = useState;const onChange = => {
setEditingName;}，const onNameSubmit = => {
props.onNewameUpdated;}，return (
<>

Update
);}，

对比：V1 的 NameEditingComponent 有四个 props、两个内部 state，充当“传声筒”。V2 则只保留必需的两项 prop。内部自行管理编辑状态，成为真正可复用的单元。

主要疑问：状态该归谁管？这不仅是 React 的问题，更是 TypeScript 在组件设计阶段划定边界的体现。

说到第一层，类型约束 —— React.FC 与泛型

React.FC 的本质

React.FC 是 FunctionComponent 的简写。其主要定义如下：

type FC

= FunctionComponent

它说明了组件的本质：一个函数，输入是 props输出是 ReactNode.

• 调用时自动检查：T​S 会在 JSX 中立即报错不匹配的 props。老实说，
• 编码时智能提示：编辑器基于 Props 类型提供自动补全。

至于泛型。给类型传参

React.FC` 中的 P​rops 必须是对象，因为 React 的 props 永远是对象。泛型起到了两大作用：

• 对外约束：调用者必须传入符合定义的 props。
• 对内约束：组件内部 `props` 的类型被锁定，编辑器能安全提示。

Props 定义四大写法

1. a interface ：适合需要 、导出的复杂类型。其实，
2. type 别名 : 效果类似。但不能重复声明，
3. 对象字面量 ：仅几条 prop 时简洁直观。
4. 参数直接标注 ：社区主流写法。
/ol>

至于第二层，状态归属 —— State 应放哪儿？

痛点 ： 父子之间不断传递 state 与回调，使得代码膨胀、难以追踪。

状态归属原则 ： State 应该放在离使用它最近的组件里。如果只影响单个组件，就让它属于那个组件。

V1 的设计缺陷

1. 父组件知道太多 父组件需要计算 `disabled` 等业务逻辑。本应由子组件，导致父组件臃肿并与子组件耦合。
2. 子组件没有自主权 `onNmaeUpdated` 为无参函数。子组件无法决定提交什么值，可复用性受限。
3. 接口冗余 `editingNane` 与 `onEditi ngNaneU pdated` 暴露内部实现细节——“编辑过程逐字变化”。
/ol>

V2 的改进

• 父组件更干净 ::只管理最终使用者名 `username`。
• <强烈>          
Sorry continue We need finalize properly.

至于写在前面。一样需求，两种写法，天壤之别——你的痛点在哪里？

痛点一： 相同业务，却出现了代码膨胀、维护困难、接口冗余；话说回来，痛点二： "谁来管这段 state"；不清晰导致逻辑分散、BUG 难排查。

---

案例对比——V1 与 V2 的完整代码

V1：父组件掌控全部状态

// App.tsx
const App = => {
const = useState;const = useState;// 把编辑好的名字同步回父层
const setUserna meSt ate = => { setNam e;}，// UI
&return (
&nbs p;&l t，&g t;HelloC omponent userNa me={editi ngNa me} /& g t;&nbs p，&l t;NameEdi tingCompone nt
&nbs p;其实，	disabled ={editi ngNa me=== ''|| editi ngNa m e=== nam e }
/&g t;n bsp，怎么说呢，&
# n b s p;) )，}; v oid;o nEditi ngNa meU pdated :=> v oid;d isabled :bo olea n;}
c ons t Na meEd itingCompone nt :R eact .FC =
=>{ c ons t o nCha nge =(e :R eact .Ch angeEv ent
&l t;) =& gt { pr ops .o nEdi ti ngNa m eU pdated;}，c ons t o nSub mit ==& gt { pr ops .o nNam eU pdated;}，r et urn( & l t;，inp ut v al u=e.pr ops.e dit ing N am e
&l t;，o nCha nge ={o nCha nge }/& g t;&l t，;bu tt ont d isabled= {pr ops.disa bled } o nl click=
{o nSub mit }> Up da te& l tl;/bu tt ont&)...
};/ pre>

V2：子组件自主管理内部 state​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​‏‏‏‏‏‏‏‏‏‏‏‏
tsx
// App.tsx
const App = => {
const =useStat e;return(
<>


<>
);}，按理说，// NameEditComp one nt.tsx
interface Props{
initia lUs erna Me:string;o nNam eUpda ted:=>vo id;}
cons tant N ameEditCompon ent:R ect.F C==>{
co ns tat=useStat);con st han dleCha nge==>seTedi ti ngN am e;con st han dleSu bmit==>onNam eupd ate;re turn(
<>

Up date<&/bu tt onc/>
<>
);}，


⚡️ 主要痛点再梳理 ⚡️ ​​​​​​


Pain Point 1 – 状态泄漏: The state lives in a component that does not actually need it.Placeholder for spacing.
🟢 解法 → 将该 state “下沉” 到最靠近使用它的子节点里。不过，

Pain Point 2 – 接口臃肿: The parent has to know too many implementation details of its child.Pain Point 3 – 可复用性低: A component that can’t be used elsewhere because its API is tightly coupled to a specific parent.

第一层 – 类型约束​​​​​​​​​​​​​​​​​​​‍‍‍‍‍‍‍‍‍‍ tsx type FC =FunctionComponent