React 组件进化论：从状态混乱到 UI = fn

一、React + TypeScript：为什么公司级开发离不开类型约束？

在大型项目中。你可能会遇到“props 变成后端字段名，导致类型错误无法及时捕获”的痛点。TypeScript 能在编译阶段就检查这些问题，让团队协作更可靠。

React.FC：函数组件的身份证

// React 源码中的类型声明
type FC

= FunctionComponent

React.FC 是函数组件的类型别名，用来约束 props 的类型。不传时默认为 {}传了就用你定义的类型来约束。

interface vs type：组件 Props 该用哪个？

// 方式一：interface
interface Props {
userName: string;}
// 方式二：type
type Props = {
userName: string;}，// 两者都可以但 interface 更适合定义“对象需要满足的属性和方法”
const HelloComponent: React.FC = => {
return 

Hello {props.userName}
};

选择建议：

特性	interface	type
对象形状描述 ✅ 推荐 ✅
可以联合类型/交叉类型 ❌ 不支持
支持声明合并 ✅ 自动合并 ❌ 覆盖组件 Props ✅ 推荐
可以自定义事件类型 ✅ 推荐

二、三次重构：一个“修改使用者名”功能的进化史

V1 版本：把 event 对象传给父组件

┌─────────────────────────────────────────┐
│ App │
│ ┌─────────────┐ ┌─────────────────┐ │
│ │ Hello │ │ NameEdit │ │
│ │ 显示使用者名 │ │ input + event │ │
│ └─────────────┘ └──────────┬────────┘ │
│ event │
│ state: username ◀───────────────┘
└─────────────────────────────────────────┘

import * as React from 'react';import Hello from './components/Hello';import NameEditComponent from './components/NameEditComponent';

const App: React.FC = => { const = React.useState;

// 父组件直接接收 event 对象 const setUsernameState = => { setUserName;}，

return (

);}，export default App;

import * as React from 'react';interface Props { username: string;onChange: => void;}

const NameEditComponent: React.FC = => { return (

);}，export default NameEditComponent;

• 子组件把 event 对象直接传给父组件。父组件必须关心 .
• 父组件职责被污染——本应只负责“持有状态和修改状态”，现在还要处理 DOM 事件细节。
• "提交" 概念缺失。每输入一个字符立即变化，导致 UI 瞬时卡顿。

V2 版本：子组件持有私有状态

┌──────────────────────────────────────────────┐
│ App │
│ state: username │
├─────────────┐ ┌─────────────────────┐ ├─────────────┐
│ Hello ▼ | NameEdit ▼ | Edit ▼
├─────────────▲ | 私有状态 ▲ ├──────▲
│ | | editingName | |
| | | click submit | |
| ▼ | ↓ ▼ |
| setUser | newName:string → setUser|
| ▲ |
├──setUsername ← Parent State← 

const App: React.FC = => { const = React.useState;return (

);}，export default App;

const NameEditComponent :React.FC<Props>=>{ // 子件持有私有状态 const =React.useState;const onChange==>{setEditing;话说回来，} const submit==>{props.onNameUpdated;} return( <> Update name:         {editing}   {Date.now} ) } export default NameEditComponent

• 父+子各自负责不同部分但耦合度较高；子内部维护编辑中值降低耦合；状态统一在 parent 提高可控性；全局管理提高性能与可测性。
### V2 的改进：
• * 父不再处理 ChangeEvent，只接收字符串——接口更干净。
• * 子引入编辑概念：输入时不影响 Hello，可点击按钮才提交。
• * ChangeEvent 的复杂性封装在子内部。
• * **缺点**：
  • * editing 不随 parent 更新同步。
  • * 无禁用逻辑；使用者可提交空名或未改名。
  ## V3 版本：状态提高到父 App ├--state:name + editing ├--Hello 渲染 name ├--No-state child → props:{editing。onUpd,onEdt,disabled} tsx // App.tsx import * as React from 'react';import HelloComp from './components/Hello';import NameEdComp from './components/NoStat';const App==>{ const =React.useState;const =React.useState;// async load demo const load==>{setTimeout=>{const n='name-from-async';setNm，setEd;},1000)}，useEffect=>load,);按理说，// submit handler only update name const upd=>=>{setNm;}，return( <>
  至于Name，{name}
  setEd} onSubmit={=>upd} /> );} export default App;tsx // NoStat component – pure view no state interface Props{ editing:string,disabled:boolean,onEdtChanged:=>void,onSubmit:void。} const NoStat :React.FC==>{ return( <> Update name: onEdtChanged} /> onSubmit}>Apply change! ) } **主要改进** * **完全提高** – `editing` 在 parent 拥有，可全局同步。怎么说呢，* **纯展示** – 子无私有 state，仅渲染。* **禁用逻辑** – 防止无效提交。* **异步同步** – 同步 `name` 与 `editing`。## 三次重构对比

  # 重构阶段	关键维度
  	状态归属	函数签名	Event 泄漏？	异步同步？	按钮禁用？	可测性?
  V1 事件穿透	父+子各自维护，但业务跨层级混杂  ◦ child emits events to parent   ◦ parent handles events   痛点① 事件跨层级导致难以跟踪业务逻辑.	void → string → string	yes	no	no	low – hard to mock raw events.
  V2 子私有状态	parent holds display state only — sub‑state in child. 痛点② 外部更新无法同步至编辑框.	void -> void	no – event encapsulated inside child.	partial	no	moderate – easier than V1 but still has hidden sub‑state.
  V3 完全提高 → pure view component​	✓ 调整!所有业务都集中在 parent ——易于维护与调试.​ 痛点③ 无论何时更新都能保证一致性.	fn→borderless pure component.	No – child never touches raw event.			"UI 是纯函数 of props" — 相同 props 总是相同 UI。无副作用，让调试像算式一样简单。 "无私有 state" → 可以直接使用,性能调整比较容易做到。 "单向数据流" → 每一次更新都有可追踪方法，从上而下的数据流使代码更易读、可复用。若出现 bug，只需检查对应 props 即可定位。

  useEffect：副作用与生命周期管理

  四种典型用法

  tsx

  // 一次挂载后执行 useEffect => { console.log;},)，

  // 挂载 + 特定依赖更新后执行 useEffect => { console.log;localStorage.setItem);},)，

  // 卸载前清理 - 防内存泄漏 useEffect=>{ const interval=setInterval=>console.log,1000);return =>{clearInterval;}，},);

  用法对照表

  ​ ​ ​

  # 用法说明

  ​ ### 清理函数为何必不可少？

  If you forget to clear timers or subscriptions inside an unmounted component。those resources keep running in background and will never be reclaimed—leading to memory leaks and performance degradation.

  ## localStorage：前端本地持久化方案 ### 三种方案对比 function addTodo{ setTodos,text,completed:false}]);// todos still old here!localStorage.setItem);// writes stale data!}

  原因是 setTodos's state update is asynchronous—so subsequent line still sees old array.

  TypeScript 在通信中的型约束优势

  自定义事件型声明例子：

  interface Props{ editing:string。disabled:boolean,onEditingChanged:=>void,onApply:void,}

  class MyInput extends Component{ render{ return=>this.props.onEditingChanged} />);说起来，} }

  合成事件 vs 值型传递差异：

  • onChange?:=>void – 必须知道 DOM API，否则难以迁移网站或测试。👎 使用者往往忘记 event.target.value 或误用 currentTarget。👍 优势是可以直接捕获所有浏览器兼容细节，但代价是耦合度高。
  onApply?:=>void 或 接口 —— 父侧只关心业务值。避免了 DOM 紧耦，更易 Mock 与单元测试。👑🏼🛠️💡 --- 设计原则 - 子仅负责处理 DOM，将结果包装成业务数据。- 父侧仅消费业务数据，不关心原始事件细节。这样才能真正实现 “UI 是纯函数”。--- ## 完整实战案例：TodoList + useEffect + localStorage 下面整合之前学过的一切——TypeScript、Hooks、生命周期和本地持久化，演示一个完整且高度可维护的小型 Todo List 应用。tsx /* ====================== Demo 用例 ===================== / import { useState,useEffect } from 'react';/ -------------------- Todo Input -------------------- / const TodoInput :React.FC<{onAdd:=>void}>==>=>ev.key==='Enter'&&p.onAdd} /> {} );/ --------------------- Todo List -------------------- */ type Item ={id:number。text:string,done:boolean} type Props ={items:Array,toggle:=>void,destroy:=>void} counter?，;type StatsProps ={total:number,active:number} counter?，;话说回来，type StatsComp ={…} everything?，;default，?，;fake，?，;deep，?，;effect，?，test?，;delete，?，fake?，?，nothing?，?，

。

---