Code Review

将旧版 JS 重构为 React Hooks

支持工具:CursorClaude

使用场景

有一个旧的基于类的 React 组件，需要将其现代化，改写为使用 React Hooks 的函数式组件。

Prompt 正文

将以下内容复制到你选择的 AI 工具中。

请将以下基于类的 React 组件重构为使用 React Hooks 的函数式组件。请确保所有功能（状态管理、生命周期方法）都得到正确迁移。

[此处粘贴旧的 class-based component 代码]
在 Cursor 中打开

示例输出

import React, { useState, useEffect } from 'react';

const FunctionalComponent = (props: any) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // componentDidMount logic here
    fetchData();

    return () => {
      // componentWillUnmount logic here
    };
  }, []);

  const fetchData = async () => {
    // async logic here
    setLoading(false);
  };

  if (loading) {
    return <div>Loading...</div>;
  }

  return <div>{/* Render component data */}</div>;
};