[React 19]预加载方法的不同行为

rmbxnbpk 于 8个月前发布在 React

关注(0)|答案(2)|浏览(115)

摘要

react & react-dom 版本： 19.0.0-rc-3563387fe3-20240621
node 版本： 20.14.0

当使用 react 的 preload 方法时，在某些情况下不会创建 preload link 标签。它与两个 link 标签(OnlyLinkTags 组件)一起工作正常。

代码示例

const fs = require('node:fs');
const { createElement } = require('react');
const { preload, preinit } = require('react-dom');
const { renderToString } = require('react-dom/server');
const CSS = '/some.css';
const LINK_PROPS = {
  rel: 'stylesheet',
  href: CSS,
};
/**
* Doesn't create the preload link tag
*/
const PreloadAndPreinit = () => {
  preload(CSS, { as: 'style' });
  preinit(CSS, { as: 'style' });
  return null;
};
/**
* Doesn't create the preload link tag
*/
const PreloadAndLinkWithPrecedence = () => {
  preload(CSS, { as: 'style' });
  return createElement('link', { ...LINK_PROPS, precedence: 'custom' });
};
/**
* Creates the preload link tag correctly into the head
* The stylesheet link tag stays in the body, because it doesn't have precedence
*/
const PreloadAndLinkWithoutPrecedence = () => {
  preload(CSS, { as: 'style' });
  return createElement('link', LINK_PROPS);
};
/**
* Moves both tags into the head
*/
const OnlyLinkTags = () => [
  createElement('link', {
    key: 'preload',
    rel: 'preload',
    as: 'style',
    href: CSS,
  }),
  createElement('link', { ...LINK_PROPS, key: 'link', precedence: 'custom' }),
];
[
  PreloadAndPreinit,
  PreloadAndLinkWithPrecedence,
  PreloadAndLinkWithoutPrecedence,
  OnlyLinkTags,
].forEach((Component) => {
  fs.writeFileSync(
    `_${Component.name}.html`,
    renderToString(
      createElement(
        'html',
        null,
        createElement('head'),
        createElement('body', null, createElement(Component)),
      ),
    ),
  );
});

输出：

PreloadAndPreinit:

当前：

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
  </head>
  <body></body>
</html>

预期：

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithPrecedence:

当前：

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
  </head>
  <body></body>
</html>

预期：

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="default" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>

PreloadAndLinkWithoutPrecedence:

当前：

<html>
  <head>
    <link rel="preload" href="/some.css" as="style" />
  </head>
  <body>
    <link rel="stylesheet" href="/some.css" />
  </body>
</html>

预期：

The same as current.

OnlyLinkTags:

当前：

<html>
  <head>
    <link rel="stylesheet" href="/some.css" data-precedence="custom" />
    <link rel="preload" as="style" href="/some.css" />
  </head>
  <body></body>
</html>