做公司级 React 项目如果不使用 TypeScript，后期重构往往会直接崩溃。很多人只会简单写React.FC但 props 泛型、合成事件、useEffect 副作用还有前端持久化存储全是模糊点。

读完这篇你能掌握：

1. React.FC、interface/type、泛型完整类型约束写法
2. 父子组件单向数据流标准通信方案
3. React 合成事件 TS 类型规范
4. useEffect 生命周期与副作用实战场景
5. localStorage 与 IndexedDB 选型、代码差异、适用场景
6. 公司级无状态组件常用方法

全文代码可直接复制运行。踩坑点全部标注，新手也能看懂。

一、为什么公司项目强制 React + TypeScript

React 本身源码就是 TS 编写，搭配 TS 是大型项目的标配。其实，

• 静态类型校验：开发阶段直接报类型错误。不用等到页面运行才崩溃，
• 类型即文档：组件 props、入参、返回值自带提示，团队协作零沟通成本。
• 完善高级语法：泛型、接口、类型别名，解决 JS 弱类型带来的各种隐性 bug。

无 TS 项目的痛点：

• 传参拼写错误导致运行时异常；
• 事件对象类型混乱，难以获取目标属性；
• 复杂对象无约束，导致逻辑错误；
• 重构时牵一发而动全身，难以定位问题。

二、React 函数组件主要类型：React.FC 完整解析

React.FC 底层定义

type FC

= FunctionComponent

关键点：

1. FC 是类型别名，接收泛型 P 约束 props。
2. 组件返回值强制为 ReactNode，不能返回普通字符串/数字。
3. 自带可选 children 属性，不用手动声明。

基础 Hello 组件实战

// 用 interface 定义组件入参规范
interface HelloProps {
至于name，string;age，: number;// 可选参数
}
// FC 泛型传递 Props 类型约束
const Hello: React.FC = => {
return (


你好。{name}，今年{age?，"未知"}岁

);}，// 使用 

interface vs type 怎么选

*示例区分*这方面。

// interface：支持继承
interface User {
从id来看，number;不过，name: string;}
interface UserInfo extends User {
address: string;}
// type：仅做别名。不支持继承
type UserType = {
再看id，number;name: string;}，

三、React 合成事件 TS 类型

The native event writing is ambiguous. React provides built‑in generic event types like React.ChangeEvent,which precisely binds to DOM element types.

输入框受控组件标准写法

import { useState } from 'react';const InputDemo : React.FC = => {
const = useState;// 泛型指定 HTMLInputElement，完整拿到输入框 DOM 类型
const handleChange = => {
setEditingName;}，return (

);}，

说到*踩坑提醒*。不要直接写  =>)，因为会丢失 DOM 元素类型而无法获取完整的 target 属性。Mistake:* Using plain event handlers without generics leads to silent type errors and incomplete IntelliSense.*

自定义事件父子通信类型规范

*子组件抛出自定义事件。父组件接收，并统一约束回调函数类型*：

// 子组件 Props
interface ChildProps {
// 自定义回调，参数为输入字符串
onChangeName : =>void;}
const ChildInput : React.FC<ChildProps> => {
const handleChange = => {
// 向上抛出值
onChangeName;
}，return ;}，// 父组件使用
const Parent : =>JSX.Element = =>{
const handleUpdate ==>{ console.log;}，return <ChildInput onChangeName={handleUpdate}/>;}，

四、单向数据流：组件状态分层三版本

*主要原则*的观点是，**父组件持有状态 → 子组件仅展示**。状态通过 props 下发。而修改方法通过自定义事件上抛，实现 UI＝fn。如果没有遵循此原则，你将面临“**多处维护同一份数据导致不同步**”的痛点。*

从版本一来看，原始写法

*子组建私有状态，而父组建无法同步。使得多个人协作极易出现 bug*：

// 子组建自己存 editingName，父组建无法同步
const Child = =>{
const = useState;const change ==>{
setEditing;}，怎么说呢，return <input value={editingName}onChange={change}/>;}，
 /* ... */









至于版本二。折中方案 




*适合临时草稿场景，当使用者输入完成后再同步到父层共享状态。*

从版本三来看。较好方案 




*所有状态统一放到父部件，它成为唯一的数据源；子组建完全无 state。仅接受 props 渲染，从而提高性能和统一管理。说起来，*

// 父部件：唯一状态持有者
const Parent :=>JSX.Element =>{
const = useState;const handleChange ==>{
setEditing;}，
 return;

};

// 子部件：无任何 state，仅接收 props 渲染

interface ChildInputProps{
value这方面。string,onChange:=>void,}
const ChildInput :React.FC<ChildInputProps>=>{
const inputchange ==>{
onChange;}，return;}，}



全局数据唯一源头，不会出现数据不一致的问题；​    ​ ​️​️​​​️​️‍ ​.

子组建无渲染冗余，更高效的性能表现；​  �‍‍️.

全局状态统一管理，更方便进行持久化存储或 Redux 等集中式管理；其实，​.

更易于单元测试和调试；​.

符合业务团队对可追踪性的需求。按理说，​​.



五、useEffect 副作用替代全套生命周期 





挂载后 mounted ：依赖数组传。仅页面初始化执行一次，​

• 更新后 updated ：依赖数组填入监听变量；​
  
• 卸载前 unmounted ：函数内部返回清理函数，在卸载时执行。其实，•
•
‌‌‌‌‌‌‌

 







javascript

console.log;