纯HTML环境下如何使用React Canary？如何引入react-dom/client？

一、Canary版本来源可靠性 #

从React官方维护的CHANGELOG-canary.md获取版本号是完全可靠的。Canary分支是React团队用于迭代新特性的预览通道，所有实验性特性都会先在该版本中发布测试。

二、修复createRoot未找到的问题 #

在React 18+的Canary版本中，createRoot已从ReactDOM核心包迁移至react-dom/client模块，CDN引入时需调整脚本结构：

1. 引入React Canary UMD包：

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.0-canary-546178f91-20231005/umd/react.production.min.js"></script>

2. 引入react-dom/client的UMD包：

<script crossorigin src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.0-canary-546178f91-20231005/umd/react-dom-client.production.min.js"></script>

3. 调用createRoot时，需使用全局暴露的ReactDOMClient对象：

const root = ReactDOMClient.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* 你的组件代码 */}
  </React.StrictMode>
);

三、解决unstable_cancelCallback错误 #

该错误通常源于：

• 第三方库（如状态管理、UI组件库）未适配Canary版本的内部API变更；
• 自定义代码直接调用了React内部的不稳定API。

建议先排查是否使用了未适配的第三方依赖，若仅使用React核心库，检查代码中是否有调用unstable_前缀的内部方法，这类API在Canary版本中会频繁迭代，禁止直接依赖。

四、Suspense及Canary专属use特性使用提示 #

• Suspense用法遵循React 18官方规范即可，Canary版本的增强特性可直接参考官方文档示例；
• use是实验性API，仅在Canary版本可用，API随时可能调整，绝对禁止用于生产环境。

内容的提问来源于stack exchange，提问作者cYrus