样式资源

样式表如何参与加载顺序？

• 分组标识: precedence 是 React 用来安排 head 中样式表顺序的任意字符串，不是浏览器原生的 CSS 优先级;
• 发现顺序: 第一次出现的不同值建立较低分组，后续新值建立较高分组；同值样式表回到同一组;
• 命名无语义: high、low 不会按字面比较，若 high 先被发现，它仍是较低分组;

const stylesheets = (
  <>
    <link rel="stylesheet" href="/base.css" precedence="base" />
    <link rel="stylesheet" href="/theme.css" precedence="theme" />
    <link rel="stylesheet" href="/dialog.css" precedence="base" />
  </>
);

<!-- 同分组放在一起；theme 分组仍排在后面 -->
<link rel="stylesheet" href="/base.css" />
<link rel="stylesheet" href="/dialog.css" />
<link rel="stylesheet" href="/theme.css" />

• 层叠边界: 排在后面只在来源、层、important 和选择器权重等条件可比时更易覆盖前者，不取代 CSS 级联算法;

什么条件下样式表会与 Suspense 协调？

• 加载协调: React 托管的外部样式表未就绪时，依赖组件可保持最近 fallback，样式就绪后再揭示，避免 FOUC;
• 基本条件: React 渲染的 link 需同时具有 rel="stylesheet"、稳定 href 与 precedence；普通 link 或缺 precedence 时不假定会挂起;
• 手动管理: 传入 onLoad、onError 或 disabled 表明应用自己管理加载或启用状态，不再依赖同一套 React 特殊处理;

<Suspense fallback={<EditorSkeleton />}>
  <link rel="stylesheet" href="/editor.css" precedence="page" />
  <Editor />
</Suspense>

• 职责分工: 浏览器负责下载与应用 CSS，React 负责决定依赖内容何时显示;

如何声明可去重的内联样式？

• 资源三元组: children 是 CSS 字符串，href 是稳定且唯一的内联样式标识，precedence 是排序分组;
• href 语义: style 上的 href 不是下载 URL；多个组件声明相同 href 时，React 将其当作同一份资源并只保留一份;
• 一致性: 相同 href 必须对应相同 CSS；内容版本变化时同步更换标识或哈希;

function Button({ color }) {
  return (
    <>
      <style href="button-styles-v1" precedence="components">
        {`.button { color: var(--button-color); }`}
      </style>
      <button className="button" style={{ "--button-color": color }}>
        按钮
      </button>
    </>
  );
}

<Button color="red" />;
<Button color="blue" />;

• 生命周期限制: 托管的 href、precedence 与 children 应视为不变；渲染后更新可被忽略，卸载后样式也可能留在 DOM;
• 动态值: 频繁变化的尺寸或颜色使用 style prop 或 CSS 变量，不用新 href 不断制造全局样式资源;