<a href="https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wG4AoctCAOwGd4AJVAEySjgF44AKASi4A+XuThi4AHgAWrdnADWSAJ6d8ipfjhoANijp0AcihBJVMlGyj5Bo8XeYX2tsRID05yzb4Vq9eAGFaGCQaeG4eAG84GmMkOABfAC44KJiTZIYoYBoAcwSBTmEeZ0k6JAxgWi1dfSMTVV9g0OtA0JCYRIi0pHi3MoraLx9aBjgAMQgIYI5wguEJTEnp6r1DWNVFqfZrCa2oN03pwWG-OAAFFBy42aEROwkWYAA3Fdr1-DBLpGsS+4dLOCuGx2e6tJrwbqqJQ4ABGU00QN+4gku2WiJByMEMm02ggbmByNcjyeQyAA"><img src="https://images.yrobot.top/2022-07-19/D5yJlJ-17-30-14.png" alt="D5yJlJ-17-30-14"></a>
<pre><code class="language-ts">React.createElement(type, [props], [...children]);
</code></pre>

React是怎么运行起来的

在解读 renderElement 之前，我们需要先了解 node 的结构

读源码理解ReactDOMServer

web component 在 SRR 的情况下会导致页面回流

<h2 class="group flex justify-start items-center">web component 在 SRR 的情况下会导致页面回流<a name="web-component-在-srr-的情况下会导致页面回流" aria-label="Anchor" id="web-component-在-srr-的情况下会导致页面回流" class="inline-flex justify-center items-center w-6 h-6 ml-4 text-base rounded-sm bg-gray/100 decoration-transparent invisible group-hover:visible" href="#web-component-在-srr-的情况下会导致页面回流">#</a></h2><table>
<thead>
<tr>
<th><img src="https://images.yrobot.top/2022-07-23/unpyOm-23-42-04.png" alt="unpyOm-23-42-04"></th>
<th><img src="https://images.yrobot.top/2022-07-23/o2gW6j-23-42-51.png" alt="o2gW6j-23-42-51"></th>
</tr>
</thead>
<tbody><tr>
<td>帧 1</td>
<td>帧 2</td>
</tr>
</tbody></table>
可以看到，svg-inline 在 SSR 场景下，初次载入页面时会有明显的回流现象。 svg-inline 一开始在文本流里占位为 0*0；过了一会变成空白的 40*40；最后请求 svg 资源并展示在内部。
事实上，svg-inline 的 class 里已经对 svg-inline 设置了大小为 <code>w-9 h-9</code> <img src="https://images.yrobot.top/2022-07-23/19FXOj-23-47-54.png" alt="19FXOj-23-47-54">
而从 <code>帧 1</code> 看到，页面剩余部分已经完成了 css 的加载和渲染，所以对于 svg-inline 来说已经设置了 <code>w-9 h-9</code>，但是宽高并没有生效。
所以猜想到是 web-component 逻辑里对于 svg-inline 默认设置的 <code>display: inline-block;</code> 没有生效。而浏览器对于 web-component 的默认 display 的解释是 inline。所以宽高的设置没有生效。
具体浏览器对于 web-component 默认的 display 的处理可以参看 <a href="https://github.com/WICG/webcomponents/issues/224">[Custom Elements]: Custom elements should be display: block by default
</a>
而 svg-inline 中的 style 设置是通过 js 在 header 里加 style 标签的方式设置的。
所以这部分的 css 逻辑生效在 js 逻辑运行之后。
这就解释了为什么 svg-inline 会在 SSR 场景下有回流现象：
<ol>
<li>在 SSR 场景下，svg-inline 的 web-component 定义逻辑只能通过在 useEffect 中异步 import 的形式引入（node 不存在 HTMLElement 等变量）</li>
<li>在<code>帧 1</code>的时刻，全局 css 已经加载并渲染完毕，但是 useEffect 的引入 svg-inline 定义的逻辑还没运行，所以 svg-inline 是默认的 inline，从而导致对于 svg-inline 的宽高设置无效，即大小为 0*0</li>
<li>在<code>帧 1</code>和<code>帧 2</code>之间的某一刻，svg-inline 定义的逻辑已经运行完毕，所以 svg-inline 是 inline-block，所以对于 svg-inline 的宽高设置生效，即大小为 40*40。但在<code>帧 2</code>那一刻 svg 资源不一定加载完成，所以部分 svg-inline 是空白的。</li>
</ol>
解决方案：
<ul>
<li>确保对于 svg-inline 的 display: block 的设置和宽高设置的生效在同一时刻。<ul>
<li>直接设置 svg-inline 的 class 为 <code>block w-9 h-9</code></li>
</ul>
</li>
</ul>
<pre><code class="language-tsx">import React, { useEffect } from &quot;react&quot;;
import { InlineSVGElement } from &quot;@yrobot/svg-inline&quot;;
import cn from &quot;classnames&quot;;

function Icon({
 icon,
 className = &quot;&quot;,
 ...props
}: { icon: string; className?: string } &amp; Omit&lt;
 InlineSVGElement,
 &quot;src&quot; | &quot;class&quot;
&gt;) {
 useEffect(() =&gt; {
 import(&quot;@yrobot/svg-inline&quot;); // avoid load svg-inline in SSR
 }, []);
 return (
 &lt;svg-inline
 {...props}
 class={cn(&quot;inline-block&quot;, className)}
 src={`/icons/${icon}.svg`}
 &gt;&lt;/svg-inline&gt;
 );
}

export default Icon;
</code></pre>