修复 LogoDash PNG图片无法导出的问题：React 18异步渲染踩坑记

最近在开发Logo 生成器 Logo Dash应用时，遇到了一个有趣的问题：将 ReactDOM 渲染你相关的代码改成使用 React 18 的 API 之后，PNG图片导出功能突然失效了。经过排查，发现这与React 18的异步渲染特性有关。今天就来分享一下这个问题的来龙去脉和解决方案。

LogoDash 功能简介

LogoDash 是我最近开发的一个Logo制作工具，主打一键生成极简Logo。用户既可以从图标库（目前支持 Font Awesome 和 Lucide图标）中自定义（图标、配色、文字、渐变等细节），也可以通过「随机生成」，刷出极简渐变风Logo。它能够帮助专为创业者、独立开发者快速生成简洁美观的图标，加速产品上线过程。

在Logo Dash 应用中，用户可以将设计好的 Logo 导出为PNG格式或者 SVG 格式。而最近有一次代码提交，却导致了 PNG 导出功能失效。今天就来分享一下我解决这个问题的历程。

问题背景

在 LogoDash 的 PNG 导出功能中，需要通过这样一段逻辑获取图标的 svg 代码，然后再在 canvas 中绘制

typescript
// 原来的代码 - 被React 18标记为过时
import ReactDOM from "react-dom";
const tempContainer = document.createElement('div');
ReactDOM.render(iconElement, tempContainer); // 控制台警告在这里！
const svgElement = tempContainer.querySelector("svg");

一切始于控制台的一条警告信息：


Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead.

好吧，那就按照提示更新API。按照官方建议，改成了：

typescript
// 修复警告后的代码
import ReactDOM from "react-dom/client";
const tempContainer = document.createElement('div');
const root = ReactDOM.createRoot(tempContainer);
root.render(iconElement); // 警告消失了，但问题来了！
const svgElement = tempContainer.querySelector("svg"); // 这里开始出问题

而当修改完成后，经过测试，却发现 PNG导出功能失效了。导出的图片内容不全：只显示背景，而关键的图标元素却不见了踪影。

Debug 过程

打印 svgElement 时发现其 innerHTML 为空，说明图标元素在打印那一刻尚未渲染到临时容器中。
换句话说，问题出在“读”早于“写”——我们试图在 React 完成绘制前就访问了 DOM。

解决方案

顺着这个思路，很容易怀疑 root.render() 并非严格同步。查阅 React 官方文档后得到确认：

Although rendering is synchronous once it starts, root.render(...) is not. This means code after root.render() may run before any effects of that specific render are fired.

因此，关键在于确保在获取 DOM 内容之前，React 已经把这次更新 flush 到屏幕。

为此，React提供了 flushSync 这个API来强制同步执行更新。于是我们可以用 flushSync 把渲染的调用包一下：

typescript
import { flushSync } from "react-dom";
// 修改后的代码
const root = ReactDOM.createRoot(tempContainer);
flushSync(() => {
  root.render(iconElement);
});
// 现在可以安全地获取SVG元素了
const svgElement = tempContainer.querySelector("svg");

通过将root.render()调用包装在flushSync中，我们强制React立即完成渲染过程并更新DOM，这样就能确保在后续代码执行时，我们可以获取到完整的渲染结果。这样，就能够正确获取到 svg 图标，导出功能也就恢复正常啦

经验总结

这个问题提醒我们在React 18中需要特别注意渲染的异步特性。以下是几点重要的经验总结：

在React 18中，root.render()默认是异步的，不要假设调用后DOM会立即更新
当需要在渲染后立即访问DOM内容时，使用flushSync来确保同步执行
对于需要获取渲染结果的功能（如导出、截图等），务必确保渲染完成后再进行操作

希望这篇分享能帮助到遇到类似问题的开发者！