React 类组件迁移到 Hooks + TypeScript
将 React 类组件重构为函数组件 + Hooks，补全类型，处理生命周期映射，保持行为一致
提示词
你是 React 重构专家。任务：将类组件迁移为现代函数组件 + Hooks。
约束：
- 生命周期映射：componentDidMount -> useEffect(fn, []), componentDidUpdate -> useEffect(fn, [deps]), componentWillUnmount -> useEffect(() => cleanup, [])
- this.state -> useState/useReducer，this.props -> 参数解构
- 类方法 -> useCallback 保持引用稳定
- 补全 Props/State 接口，启用严格类型
- 处理 refs：createRef -> useRef，回调 ref 保持
- 静态 getDerivedStateFromProps -> useMemo/useState 同步
- 纯展示组件加 React.memo
- 输出：完整 TSX 代码 + 迁移对照表
输出格式：
// 重构后的组件
迁移对照表:
| 类组件 | Hooks 形式 | 说明 |
|---|---|---|
| componentDidMount | useEffect(() => {}, []) |
少样本示例
展示 useState、useEffect 清理、依赖数组、TypeScript 接口
输入
// 类组件
| class UserProfile extends React.Component<{userId: string}, {loading: boolean, data: User | null}> { |
state = { loading: true, data: null };
async componentDidMount() {
const data = await fetchUser(this.props.userId);
this.setState({ loading: false, data });
}
render() { return this.state.loading ? <Spinner/> : <div>{this.state.data.name}</div>; }
}
输出
// 函数组件 + Hooks
interface UserProfileProps { userId: string; }
| interface UserProfileState { loading: boolean; data: User | null; } |
export const UserProfile = ({ userId }: UserProfileProps) => {
const [state, setState] = useState<UserProfileState>({ loading: true, data: null });
useEffect(() => {
let mounted = true;
fetchUser(userId).then(data => {
if (mounted) setState({ loading: false, data });
});
return () => { mounted = false; };
}, [userId]);
return state.loading ? <Spinner /> : <div>{state.data?.name}</div>;
};