> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 创建 React 18 到 19 的升级手册

export const UseCaseHero = ({title, description, prompt, category, features, devinUrl, agent, intent, playbookId, type}) => {
  const encodedPrompt = encodeURIComponent(prompt || '');
  const tag = 'docs-use-case-gallery';
  const utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=hero-cta';
  const agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  const devinHref = type === 'schedule' ? 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + (prompt ? '&prompt=' + encodedPrompt : '') : type === 'review' ? 'https://app.devin.ai/review?' + utm : agent === 'ada' ? 'https://app.devin.ai/search?' + utm + '&noSubmit=true' + (prompt ? '&prompt=' + encodedPrompt : '') : devinUrl ? devinUrl.includes('?') ? devinUrl + '&' + utm + agentParams : devinUrl + '?' + utm + agentParams : prompt ? 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encodedPrompt : 'https://app.devin.ai/?' + utm + agentParams;
  const buttonLabel = type === 'schedule' ? 'Schedule in Devin ↗' : type === 'review' ? 'Set Up Devin Review ↗' : agent === 'advanced' ? 'Try in Devin ↗' : agent === 'dana' ? 'Try in Dana ↗' : agent === 'ada' ? 'Try in Ask Devin ↗' : 'Try in Devin ↗';
  const featureList = features ? features.split(',').map(f => f.trim()) : [];
  return <div className="uc-hero">
      <div className="uc-hero-inner">
        <div className="uc-hero-left">
          <h1 className="uc-hero-title">{title}</h1>
          <p className="uc-hero-desc">{description}</p>
          <div>
            <a href={devinHref} target="_blank" rel="noopener noreferrer" className="try-in-devin-btn">
              {buttonLabel}
            </a>
          </div>
        </div>
        <div className="uc-hero-meta">
          <div className="uc-meta-item">
            <span className="uc-meta-label">Author</span>
            <span className="uc-meta-value">Cognition</span>
          </div>
          <div className="uc-meta-item">
            <span className="uc-meta-label">Category</span>
            <span className="uc-meta-value">{category}</span>
          </div>
          {featureList.length > 0 && <div className="uc-meta-item">
              <span className="uc-meta-label">Features</span>
              <span className="uc-meta-value">{featureList.join(', ')}</span>
            </div>}
        </div>
      </div>
    </div>;
};

export const PromptBlock = ({children, type, agent, intent, playbookId}) => {
  var utm = 'utm_source=docs&utm_medium=use-case-gallery&utm_campaign=prompt-block';
  var tag = 'docs-use-case-gallery';
  var agentParams = (agent ? '&agent=' + agent : '') + (intent ? '&intent=' + intent : '') + (playbookId ? '&playbookId=' + playbookId : '');
  var label = type === 'schedule' ? 'Schedule in Devin' : type === 'playbook' ? 'Create Playbook' : type === 'knowledge' ? 'Add to Knowledge' : agent === 'advanced' ? 'Try in Devin' : agent === 'dana' ? 'Try in Dana' : agent === 'ada' ? 'Try in Ask Devin' : 'Try in Devin';
  var buildUrl = function (text) {
    var encoded = encodeURIComponent(text);
    if (type === 'schedule') return 'https://app.devin.ai/settings/schedules/create?' + utm + agentParams + '&prompt=' + encoded;
    if (type === 'playbook') return 'https://app.devin.ai/settings/playbooks/create?' + utm + '&body=' + encoded;
    if (type === 'knowledge') return 'https://app.devin.ai/knowledge?' + utm + '&body=' + encoded;
    if (agent === 'ada') return 'https://app.devin.ai/search?' + utm + '&noSubmit=true&prompt=' + encoded;
    return 'https://app.devin.ai/?tags=' + tag + '&' + utm + agentParams + '&prompt=' + encoded;
  };
  const ref = React.useRef(null);
  const [href, setHref] = React.useState('#');
  React.useEffect(() => {
    if (!ref.current) return;
    var codeEl = ref.current.querySelector('pre code');
    if (codeEl) {
      var text = codeEl.textContent.trim();
      if (text) setHref(buildUrl(text));
    }
    var header = ref.current.querySelector('[data-component-part="code-block-header"]');
    if (header && !header.querySelector('.prompt-block-devin-link')) {
      var link = document.createElement('a');
      link.href = href;
      link.target = '_blank';
      link.rel = 'noopener noreferrer';
      link.className = 'prompt-block-devin-link';
      link.style.cssText = 'display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:#fff;font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;white-space:nowrap;background:#317CFF;transition:background 0.2s;margin-left:8px;';
      link.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg> ' + label;
      link.onmouseenter = function () {
        link.style.background = '#2968D9';
      };
      link.onmouseleave = function () {
        link.style.background = '#317CFF';
      };
      header.appendChild(link);
    }
    var existingLink = ref.current.querySelector('.prompt-block-devin-link');
    if (existingLink && href !== '#') existingLink.href = href;
  });
  return <div className="prompt-block" ref={ref}>{children}</div>;
};

<UseCaseHero title="创建 React 18 向 19 升级的行动手册" description="将官方 React 19 升级指南转化为分阶段的行动手册，并映射到你的代码库。" prompt="阅读 https://react.dev/blog/2024/04/25/react-19-upgrade-guide 上的 React 19 升级指南，以及我们的 React 应用。构建一个迁移行动手册，将每一项不兼容变更对应到我们的代码——哪些文件使用了已移除的 API、哪些地方需要新的 JSX 转换，以及如何分阶段执行升级，以便我们可以逐步发布。" category="迁移" features="高级, 行动手册" agent="advanced" intent="create" />

<div className="uc-detail-wrapper">
  <Tip>不想手动配置？将本页链接粘贴到 Devin 会话中，让它为你完成所有设置。</Tip>

  <Steps>
    <Step title="使用 React 19 升级指南向 Devin 发出提示">
      React 19 在 ref 处理、context 使用、TypeScript 类型以及移除遗留 API 等方面引入了破坏性变更。[官方升级指南](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) 详细说明了每一项变更，但真正困难的是把这些变更映射到*你的*代码里。与其自己通读整份指南并审查每个组件，不如把两者都交给 Devin，然后获取一份只针对你实际代码文件的升级行动手册。

      从 [Devin 首页](https://app.devin.ai/?utm_source=docs\&utm_medium=use-case-gallery) 打开一个新的 Devin 会话，然后粘贴一个包含升级指南 URL 和你需求的提示：

      <PromptBlock agent="advanced">
        ```txt 构建 React 18→19 升级行动手册 theme={null}
        我们正在把我们的 React 应用从 v18 升级到 v19。
        这是官方升级指南：
        https://react.dev/blog/2024/04/25/react-19-upgrade-guide

        请构建一份针对我们代码库的迁移行动手册：
        - 先安装 react@18.3，并在升级到 v19 之前修复所有弃用警告
        - 查找所有 forwardRef 的使用，并规划将 ref 作为 prop 传递的迁移
        - 识别使用遗留 Context API（contextTypes、
          getChildContext）且需要转换为 createContext 的组件
        - 标记任何字符串 ref 用法或遗留生命周期方法
        - 列出需要更新 ref 类型的 TypeScript 文件
          （例如，将仅使用 RefObject 改为使用 RefObject | null）
        - 对步骤排序，使我们可以增量发布——先修复弃用相关问题，
          然后处理 API 移除，最后才是新特性
        - 在每个阶段之后都包含一个验证步骤
        ```
      </PromptBlock>
    </Step>

    <Step title="补充代码库特定上下文">
      Devin 使用 [DeepWiki](/zh/work-with-devin/deepwiki) 自动理解你的代码仓库架构。它还可以查找关于 React 19 的在线资料——官方升级指南、博客文章、库的变更日志——并将检索到的内容直接整合进 playbook 中。

      为了让 playbook 更加精准，可以向 Devin 说明这次迁移会涉及到的模式：

      * *"我们在 `src/components/ui/` 下的 23 个组件中使用了 `forwardRef` —— 这些是我们的设计系统基础组件"*
      * *"我们在 `src/legacy/` 中还有 4 个 class 组件使用了字符串 ref 和 `componentWillMount`"*
      * *"检查我们组织里的其他代码仓库 (例如 `acme/design-system`、`acme/admin-dashboard`) ，看看它们是否已经开始 React 19 迁移——复用它们已经建立的任何模式"*

      如果有任何依赖本身提供了 React 19 兼容性指南 (例如 React Router、React Hook Form，或你的 UI 库) ，也把这些 URL 粘贴到提示中——Devin 会读取它们，并对照其中列出的所有不兼容变更。
    </Step>

    <Step title="查看针对该代码库的专用操作手册">
      Devin 通读 React 19 升级指南，通过 [DeepWiki](/zh/work-with-devin/deepwiki) 将每一项不兼容变更与您的代码库逐一交叉比对，并生成一个分阶段执行方案，包含具体文件、复杂度预估以及验证步骤：

      ```markdown theme={null}
      # React 18 → 19 Migration Playbook

      ## Phase 1: Upgrade to React 18.3 and fix deprecation warnings (S)
      - npm install react@18.3 react-dom@18.3
      - Run the app and fix all console deprecation warnings:
        - Remove string refs in src/legacy/OldModal.tsx, src/legacy/OldTooltip.tsx
        - Replace ReactDOM.findDOMNode in src/legacy/DropdownMenu.tsx
      - Run test suite to confirm no regressions
      - Validation: Zero deprecation warnings in dev console, all tests pass

      ## Phase 2: Migrate forwardRef to ref-as-prop (M)
      - Remove forwardRef wrappers from 23 components in src/components/ui/:
        - Button.tsx, Input.tsx, Select.tsx, TextArea.tsx (high usage)
        - Modal.tsx, Popover.tsx, Tooltip.tsx (medium usage)
        - +16 more components (full list below)
      - Pass ref as a regular prop instead of wrapping in forwardRef
      - Update TypeScript types: change RefObject<T> to RefObject<T> | null
      - Update src/types/refs.d.ts to match new React 19 ref semantics
      - Validation: All ref-forwarding components render, focus management works

      ## Phase 3: Remove deprecated APIs (M)
      - Replace legacy Context (contextTypes/getChildContext) in:
        - src/legacy/ThemeProvider.tsx → already uses createContext (no change)
        - src/legacy/LocaleContext.tsx → convert to createContext pattern
      - Remove propTypes from 12 files (TypeScript handles validation)
      - Remove defaultProps from function components (use JS defaults)
      - Validation: Context values propagate correctly, no runtime warnings

      ## Phase 4: Update data fetching and Suspense patterns (L)
      - Review Suspense boundaries in src/components/layouts/
      - Update any components relying on fallback behavior changes
      - Test lazy-loaded routes in src/routes/ with new Suspense semantics
      - Validation: All lazy routes load, loading states render correctly

      ## Phase 5: Install React 19 and adopt new features (M)
      - npm install react@19 react-dom@19
      - Replace useFormState with useActionState in src/hooks/useFormField.ts
      - Update react-dom imports: ReactDOM.render → already using createRoot
      - Enable the new JSX transform if not already active
      - Validation: Full test suite passes, app runs without errors

      ## Phase 6: Update third-party libraries (L)
      - react-hook-form → upgrade to v8 (React 19 compatible)
      - @radix-ui/react-* → upgrade to latest (ref-as-prop support)
      - react-router-dom → verify v6.4+ compatibility
      - Validation: Forms submit correctly, UI primitives render, routing works

      ## Risks
      - forwardRef removal is highest-volume change — 23 components, many
        consumed by other teams
      - TypeScript ref type changes may surface null-safety issues
      - react-hook-form v8 has its own breaking changes — test form
        validation thoroughly
      ```

      该手册是一份迁移方案，而非已执行的迁移。请与团队一起审阅，视需要调整阶段划分或范围，然后再决定具体如何执行。
    </Step>

    <Step title="执行与扩展规模">
      一旦迁移手册确认无误，保存它并将其关联到一个会话中，按阶段依次执行：

      <PromptBlock>
        ```txt Execute the React 19 migration playbook theme={null}
        Start executing the migration playbook, beginning with Phase 1
        (upgrade to React 18.3 and fix deprecation warnings). After each
        phase, run the dev server and full test suite. Only move to the
        next phase if everything passes. Open a PR when complete.
        ```
      </PromptBlock>

      **在多个仓库间扩展** — 如果你有多个需要相同升级的 React 应用，可以让 Devin 使用 [managed Devins](/zh/work-with-devin/advanced-capabilities#managed-devins) 在所有这些应用上并行运行已保存的迁移手册。
    </Step>
  </Steps>
</div>