Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions src/content/reference/react-dom/components/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ script: "<script>"

<Intro>

[浏览器内置的 `<script>` 组件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) 允许向文档添加脚本。
[浏览器内置的 `<script>` 组件](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/script) 允许向文档添加脚本。

```js
<script> alert("hi!") </script>
Expand All @@ -20,7 +20,7 @@ script: "<script>"

### `<script>` {/*script*/}

渲染 [浏览器内置的 `<script>` 组件](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) 以向文档添加内联或外部脚本。可以在任何组件中渲染 `<script>`,React 将在某些情况下将相应的 DOM 元素放置在文档头部,并对相同的脚本进行去重。
渲染 [浏览器内置的 `<script>` 组件](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/script) 以向文档添加内联或外部脚本。可以在任何组件中渲染 `<script>`,React 将在某些情况下将相应的 DOM 元素放置在文档头部,并对相同的脚本进行去重。

```js
<script> alert("hi!") </script>
Expand All @@ -41,12 +41,12 @@ script: "<script>"
但也支持其他属性:

* `async`:布尔值,允许浏览器延迟执行脚本,直到文档的其余部分已经处理完毕——这是性能优化的首选行为。
* `crossOrigin`:字符串,表示要使用的 [CORS 策略](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin),其可能的值为 `anonymous` 和 `use-credentials`。
* `crossOrigin`:字符串,表示要使用的 [CORS 策略](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Attributes/crossorigin),其可能的值为 `anonymous` 和 `use-credentials`。
* `fetchPriority`:字符串,用于指示浏览器在同时获取多个脚本时按优先级对脚本进行排名,可能的值包括 `"high"`、`"low"` 与 `"auto"`(默认值)。
* `integrity`:字符串,脚本的密码哈希,用于 [验证其真实性](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)。
* `integrity`:字符串,脚本的密码哈希,用于 [验证其真实性](https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource_Integrity)。
* `noModule`:布尔值,表示在支持 ES 模块的浏览器中禁用脚本——用于为不支持的浏览器提供一个后备脚本。
* `nonce`:字符串,表示使用严格内容安全策略时允许资源的 [加密随机数](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/nonce)。
* `referrer`:字符串,指定在获取脚本以及脚本依次获取任何资源时发送的 [referer 请求头](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy)。
* `referrer`:字符串,指定在获取脚本以及脚本依次获取任何资源时发送的 [referer 请求头](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Reference/Elements/script#referrerpolicy)。
* `type`:字符串,指定脚本是一个 [传统脚本、ES 模块还是导入映射](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type)。

禁用 React 对脚本的 [特殊处理](#special-rendering-behavior) 的属性:
Expand Down Expand Up @@ -76,11 +76,11 @@ React 可以将 `<script>` 组件移动到文档的 `<head>` 中,并对相同

### 渲染内部脚本 {/*rendering-an-external-script*/}

If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
However, the component might be committed before the script has finished loading.
You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.
如果组件依赖某些脚本才能正确显示,你可以在该组件内部渲染一个 `<script>`
然而,组件可能会在脚本尚未加载完成时就已提交到 DOM。
一旦触发 `load` 事件,你就可以开始依赖脚本提供的内容,例如通过 `onLoad` 属性进行处理。

React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
React 会对具有相同 `src` 的脚本进行去重;即使多个组件都渲染了该脚本,最终也只会向 DOM 插入一个。

<SandpackWithHTMLOutput>

Expand Down Expand Up @@ -108,7 +108,7 @@ export default function Page() {
</SandpackWithHTMLOutput>

<Note>
想要使用脚本时,调用 [preinit](/reference/react-dom/preinit) 函数可能会有益处。调用此函数可能会使浏览器比仅渲染 `<script>` 组件更早地开始获取脚本,例如通过发送 [HTTP 103 Early Hints 响应](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103)。
想要使用脚本时,调用 [preinit](/reference/react-dom/preinit) 函数可能会有益处。调用此函数可能会使浏览器比仅渲染 `<script>` 组件更早地开始获取脚本,例如通过发送 [HTTP 103 Early Hints 响应](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Reference/Status/103)。
</Note>

### 渲染内联脚本 {/*rendering-an-inline-script*/}
Expand Down