Перейти к содержанию

<script>

Canary

Расширения для <script> в React в настоящее время доступны только в канале React canary и экспериментальном канале. В стабильных релизах React <script> работает только как встроенный в браузер HTML-компонент. Подробнее о каналах выпуска React здесь.

Встроенный компонент браузера <script> позволяет добавить скрипт в документ.

1
<script> alert("hi!") </script>

Описание

<script>

Чтобы добавить в документ встроенные или внешние скрипты, отобразите встроенный в браузер компонент <script>. Вы можете рендерить <script> из любого компонента, и React в определенных случаях поместит соответствующий элемент DOM в голову документа и удалит дублирование идентичных скриптов.

1
2
<script> alert("hi!") </script>
<script src="script.js" />

Параметры

<script> поддерживает все общие свойства элементов.

У него должны быть либо children, либо проп src.

  • children: строка. Исходный код встроенного скрипта.
  • src: строка. URL-адрес внешнего скрипта.

Другие поддерживаемые пропсы:

  • async: булево. Позволяет браузеру отложить выполнение скрипта до тех пор, пока не будет обработана остальная часть документа - предпочтительное поведение для повышения производительности.
  • crossOrigin: строка. Политика CORS, которую следует использовать. Возможные значения: anonymous и use-credentials.
  • fetchPriority: строка. Позволяет браузеру ранжировать скрипты по приоритету при одновременной выборке нескольких скриптов. Может быть "high", "low" или "auto" (по умолчанию).
  • integrity: строка. Криптографический хэш скрипта для проверки его подлинности.
  • noModule: булево. Отключает скрипт в браузерах, поддерживающих ES-модули, и позволяет использовать запасной скрипт в браузерах, которые этого не делают.
  • nonce: строка. Криптографический nonce для разрешения ресурса при использовании строгой политики безопасности содержимого.
  • referrer: строка. Указывает какой заголовок Referer отправить при выборке скрипта и любых ресурсов, которые скрипт в свою очередь берет.
  • type: строка. Указывает, является ли скрипт классическим скриптом, ES-модулем или import map.

Реквизиты, отключающие особое отношение React к скриптам:

  • onError: функция. Вызывается, когда скрипт не загружается.
  • onLoad: функция. Вызывается, когда скрипт завершает загрузку.

Пропсы, которые не рекомендуется использовать с React:

  • blocking: строка. Если установлено значение "render", это указывает браузеру не рендерить страницу до тех пор, пока не будет загружен лист скриптов. React обеспечивает более тонкий контроль с помощью Suspense.
  • defer: строка. Запрещает браузеру выполнять скрипт до окончания загрузки документа. Не совместим с потоковыми компонентами, рендеримыми сервером. Вместо этого используйте параметр async.

Специальное поведение рендеринга

React может перемещать компоненты <script> в <head> документа, де-дублировать идентичные скрипты и приостанавливать загрузку скрипта.

Для того, чтобы принять это поведение, укажите свойства src и async={true}. React будет дедублировать скрипты, если у них одинаковый src. Свойство async должно быть истинным, чтобы скрипты можно было безопасно перемещать.

Если вы передадите любой из параметров onLoad или onError, то никакого особого поведения не будет, поскольку эти параметры указывают на то, что вы управляете загрузкой скрипта вручную внутри вашего компонента.

Это особое обращение сопровождается двумя оговорками:

  • React будет игнорировать изменения пропсов после рендеринга скрипта. (React выдаст предупреждение в процессе разработки, если это произойдет).
  • React может оставить скрипт в DOM даже после того, как компонент, который его отрисовал, будет размонтирован. (Это не имеет никакого эффекта, так как скрипты выполняются только один раз, когда их вставляют в DOM).

Использование

Рендеринг внешнего скрипта

Если компонент зависит от определенных скриптов для корректного отображения, вы можете отобразить <script> внутри компонента.

Если вы укажете свойства src и async, ваш компонент приостановится на время загрузки скрипта. React будет де-дублировать скрипты с одинаковым src, вставляя в DOM только один из них, даже если его рендерят несколько компонентов.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import ShowRenderedHTML from './ShowRenderedHTML.js';

function Map({ lat, long }) {
    return (
        <>
            <script async src="map-api.js" />
            <div id="map" data-lat={lat} data-long={long} />
        </>
    );
}

export default function Page() {
    return (
        <ShowRenderedHTML>
            <Map />
        </ShowRenderedHTML>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { renderToStaticMarkup } from 'react-dom/server';
import formatHTML from './formatHTML.js';

export default function ShowRenderedHTML({ children }) {
    const markup = renderToStaticMarkup(
        <html>
            <head />
            <body>{children}</body>
        </html>
    );
    return (
        <>
            <h1>Rendered HTML:</h1>
            <pre>{formatHTML(markup)}</pre>
        </>
    );
}

Когда вы хотите использовать скрипт, может быть полезно вызвать функцию preinit. Вызов этой функции может позволить браузеру начать выборку скрипта раньше, чем если бы вы просто отобразили компонент <script>, например, отправив ответ HTTP Early Hints response.

Рендеринг встроенного скрипта

Чтобы включить встроенный скрипт, отобразите компонент <script> с исходным кодом скрипта в качестве его дочерних элементов. Встроенные скрипты не дублируются и не перемещаются в документ <head>, а поскольку они не загружают никаких внешних ресурсов, они не приведут к приостановке работы вашего компонента.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import ShowRenderedHTML from './ShowRenderedHTML.js';

function Tracking() {
    return <script>ga('send', 'pageview');</script>;
}

export default function Page() {
    return (
        <ShowRenderedHTML>
            <h1>My Website</h1>
            <Tracking />
            <p>Welcome</p>
        </ShowRenderedHTML>
    );
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import { renderToStaticMarkup } from 'react-dom/server';
import formatHTML from './formatHTML.js';

export default function ShowRenderedHTML({ children }) {
    const markup = renderToStaticMarkup(
        <html>
            <head />
            <body>{children}</body>
        </html>
    );
    return (
        <>
            <h1>Rendered HTML:</h1>
            <pre>{formatHTML(markup)}</pre>
        </>
    );
}

Источник — https://react.dev/reference/react-dom/components/script

Комментарии