name: react-modernization description: 将React应用程序升级到最新版本，从类组件迁移到钩子，并采用并发特性。适用于现代化React代码库、迁移到React钩子或升级到最新React版本。

React 现代化

掌握React版本升级、类到钩子迁移、并发特性采用，以及用于自动化转换的代码修改。

何时使用此技能

将React应用程序升级到最新版本
迁移类组件到带有钩子的函数组件
采用并发React特性（Suspense、transitions）
应用代码修改进行自动化重构
现代化状态管理模式
更新到TypeScript
使用React 18+特性改进性能

版本升级路径

React 16 → 17 → 18

各版本的破坏性变化：

React 17：

事件委托变化
无事件池化
效果清理时机
JSX转换（无需React导入）

React 18：

自动批处理
并发渲染
严格模式变化（双重调用）
新根API
服务器端Suspense

类到钩子迁移

状态管理

// 之前：类组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      name: "",
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

// 之后：带有钩子的函数组件
function Counter() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

生命周期方法到钩子

// 之前：生命周期方法
class DataFetcher extends React.Component {
  state = { data: null, loading: true };

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.id !== this.props.id) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.cancelRequest();
  }

  fetchData = async () => {
    const data = await fetch(`/api/${this.props.id}`);
    this.setState({ data, loading: false });
  };

  cancelRequest = () => {
    // 清理
  };

  render() {
    if (this.state.loading) return <div>Loading...</div>;
    return <div>{this.state.data}</div>;
  }
}

// 之后：useEffect钩子
function DataFetcher({ id }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;

    const fetchData = async () => {
      try {
        const response = await fetch(`/api/${id}`);
        const result = await response.json();

        if (!cancelled) {
          setData(result);
          setLoading(false);
        }
      } catch (error) {
        if (!cancelled) {
          console.error(error);
        }
      }
    };

    fetchData();

    // 清理函数
    return () => {
      cancelled = true;
    };
  }, [id]); // 当id变化时重新运行

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

上下文和HOC到钩子

// 之前：上下文消费者和HOC
const ThemeContext = React.createContext();

class ThemedButton extends React.Component {
  static contextType = ThemeContext;

  render() {
    return (
      <button style={{ background: this.context.theme }}>
        {this.props.children}
      </button>
    );
  }
}

// 之后：useContext钩子
function ThemedButton({ children }) {
  const { theme } = useContext(ThemeContext);

  return <button style={{ background: theme }}>{children}</button>;
}

// 之前：用于数据获取的HOC
function withUser(Component) {
  return class extends React.Component {
    state = { user: null };

    componentDidMount() {
      fetchUser().then((user) => this.setState({ user }));
    }

    render() {
      return <Component {...this.props} user={this.state.user} />;
    }
  };
}

// 之后：自定义钩子
function useUser() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser().then(setUser);
  }, []);

  return user;
}

function UserProfile() {
  const user = useUser();
  if (!user) return <div>Loading...</div>;
  return <div>{user.name}</div>;
}

React 18并发特性

新根API

// 之前：React 17
import ReactDOM from "react-dom";

ReactDOM.render(<App />, document.getElementById("root"));

// 之后：React 18
import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(<App />);

自动批处理

// React 18：所有更新都被批处理
function handleClick() {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // 只有一次重新渲染（批处理）
}

// 即使在异步中：
setTimeout(() => {
  setCount((c) => c + 1);
  setFlag((f) => !f);
  // 在React 18中仍然被批处理！
}, 1000);

// 如果需要，可以选择退出
import { flushSync } from "react-dom";

flushSync(() => {
  setCount((c) => c + 1);
});
// 重新渲染在这里发生
setFlag((f) => !f);
// 另一次重新渲染

过渡

import { useState, useTransition } from "react";

function SearchResults() {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    // 紧急：立即更新输入
    setQuery(e.target.value);

    // 非紧急：更新结果（可以被中断）
    startTransition(() => {
      setResults(searchResults(e.target.value));
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <Spinner />}
      <Results data={results} />
    </>
  );
}

用于数据获取的Suspense

import { Suspense } from "react";

// 基于资源的数据获取（使用React 18）
const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<Loading />}>
      <ProfileDetails />
      <Suspense fallback={<Loading />}>
        <ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // 如果数据未就绪，这将暂停
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  const posts = resource.posts.read();
  return <Timeline posts={posts} />;
}

用于自动化的代码修改

运行React代码修改

# 重命名不安全的生命周期方法
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js src/

# 更新React导入（React 17+）
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/update-react-imports.js src/

# 添加错误边界
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/error-boundaries.js src/

# 对于TypeScript文件
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --parser=tsx src/

# 干运行以预览更改
npx jscodeshift -t https://raw.githubusercontent.com/reactjs/react-codemod/master/transforms/rename-unsafe-lifecycles.js --dry --print src/

# 类到钩子（第三方）
npx codemod react/hooks/convert-class-to-function src/

自定义代码修改示例

// custom-codemod.js
module.exports = function (file, api) {
  const j = api.jscodeshift;
  const root = j(file.source);

  // 找到setState调用
  root
    .find(j.CallExpression, {
      callee: {
        type: "MemberExpression",
        property: { name: "setState" },
      },
    })
    .forEach((path) => {
      // 转换为useState
      // ... 转换逻辑
    });

  return root.toSource();
};

// 运行：jscodeshift -t custom-codemod.js src/

性能优化

useMemo和useCallback

function ExpensiveComponent({ items, filter }) {
  // 记忆化昂贵计算
  const filteredItems = useMemo(() => {
    return items.filter((item) => item.category === filter);
  }, [items, filter]);

  // 记忆化回调以防止子组件重新渲染
  const handleClick = useCallback((id) => {
    console.log("Clicked:", id);
  }, []); // 无依赖项，永不变化

  return <List items={filteredItems} onClick={handleClick} />;
}

// 带有memo的子组件
const List = React.memo(({ items, onClick }) => {
  return items.map((item) => (
    <Item key={item.id} item={item} onClick={onClick} />
  ));
});

代码分割

import { lazy, Suspense } from "react";

// 懒加载组件
const Dashboard = lazy(() => import("./Dashboard"));
const Settings = lazy(() => import("./Settings"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

TypeScript迁移

// 之前：JavaScript
function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
}

// 之后：TypeScript
interface ButtonProps {
  onClick: () => void;
  children: React.ReactNode;
}

function Button({ onClick, children }: ButtonProps) {
  return <button onClick={onClick}>{children}</button>;
}

// 泛型组件
interface ListProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

function List<T>({ items, renderItem }: ListProps<T>) {
  return <>{items.map(renderItem)}</>;
}

迁移检查清单

### 迁移前

- [ ] 增量更新依赖项（不要一次全部更新）
- [ ] 查看发布说明中的破坏性变化
- [ ] 设置测试套件
- [ ] 创建特性分支

### 类→钩子迁移

- [ ] 识别要迁移的类组件
- [ ] 从叶子组件开始（无子组件）
- [ ] 将状态转换为useState
- [ ] 将生命周期转换为useEffect
- [ ] 将上下文转换为useContext
- [ ] 提取自定义钩子
- [ ] 彻底测试

### React 18升级

- [ ] 首先更新到React 17（如果需要）
- [ ] 更新react和react-dom到18
- [ ] 如果使用TypeScript，更新@types/react
- [ ] 更改为createRoot API
- [ ] 使用严格模式测试（双重调用）
- [ ] 解决并发渲染问题
- [ ] 在有益处的地方采用Suspense/Transitions

### 性能

- [ ] 识别性能瓶颈
- [ ] 在适当的地方添加React.memo
- [ ] 使用useMemo/useCallback进行昂贵操作
- [ ] 实现代码分割
- [ ] 优化重新渲染

### 测试

- [ ] 更新测试工具（React Testing Library）
- [ ] 使用React 18特性测试
- [ ] 检查控制台警告
- [ ] 性能测试

资源

references/breaking-changes.md：版本特定的破坏性变化
references/codemods.md：代码修改使用指南
references/hooks-migration.md：全面的钩子模式
references/concurrent-features.md：React 18并发特性
assets/codemod-config.json：代码修改配置
assets/migration-checklist.md：逐步检查清单
scripts/apply-codemods.sh：自动化代码修改脚本

最佳实践

增量迁移：不要一次迁移所有内容
彻底测试：每一步进行综合测试
使用代码修改：自动化重复转换
从简单开始：从叶子组件开始
利用严格模式：早期发现问题
监控性能：前后测量性能
记录更改：保持迁移日志

常见陷阱

忘记useEffect依赖项
过度使用useMemo/useCallback
未在useEffect中处理清理
混合类和函数模式
忽略严格模式警告
打破变化假设