From e193b95be75ddf3caff0ce4d949e0c6bea6484f1 Mon Sep 17 00:00:00 2001
From: newvo1d <keleizhu@126.com>
Date: Thu, 11 May 2023 18:53:03 +0800
Subject: [PATCH 01/17] docs(cn): translate reference/react/useInsertionEffect
 into Chinese

---
 .../reference/react/useInsertionEffect.md     | 78 +++++++++----------
 1 file changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 175b4476fa..910b3d66da 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -4,13 +4,13 @@ title: useInsertionEffect
 
 <Pitfall>
 
-`useInsertionEffect` is for CSS-in-JS library authors. Unless you are working on a CSS-in-JS library and need a place to inject the styles, you probably want [`useEffect`](/reference/react/useEffect) or [`useLayoutEffect`](/reference/react/useLayoutEffect) instead.
+`useInsertionEffect` 适用于 CSS-in-JS 库作者。除非你正在使用 CSS-in-JS 库并且需要注入样式，否则你应该使用 [`useEffect`](/reference/react/useEffect) 或者 [`useLayoutEffect`](/reference/react/useLayoutEffect)。
 
 </Pitfall>
 
 <Intro>
 
-`useInsertionEffect` is a version of [`useEffect`](/reference/react/useEffect) that fires before any DOM mutations.
+`useInsertionEffect` 是 [`useEffect`](/reference/react/useEffect) 的一个版本，在任何 DOM 变化前触发。
 
 ```js
 useInsertionEffect(setup, dependencies?)
@@ -22,80 +22,80 @@ useInsertionEffect(setup, dependencies?)
 
 ---
 
-## Reference {/*reference*/}
+## 参考 {/*reference*/}
 
 ### `useInsertionEffect(setup, dependencies?)` {/*useinsertioneffect*/}
 
-Call `useInsertionEffect` to insert the styles before any DOM mutations:
+调用 `useInsertionEffect` 以在任何 DOM 变化之前注入样式：
 
 ```js
 import { useInsertionEffect } from 'react';
 
-// Inside your CSS-in-JS library
+// 在你的 CSS-in-JS 库中
 function useCSS(rule) {
   useInsertionEffect(() => {
-    // ... inject <style> tags here ...
+    // ... 在此注入 <style> 标签 ...
   });
   return rule;
 }
 ```
 
-[See more examples below.](#usage)
+[请参考下方更多示例](#usage)
 
-#### Parameters {/*parameters*/}
+#### 参数 {/*parameters*/}
 
-* `setup`: The function with your Effect's logic. Your setup function may also optionally return a *cleanup* function. Before your component is added to the DOM, React will run your setup function. After every re-render with changed dependencies, React will first run the cleanup function (if you provided it) with the old values, and then run your setup function with the new values. Before your component is removed from the DOM, React will run your cleanup function.
- 
-* **optional** `dependencies`: The list of all reactive values referenced inside of the `setup` code. Reactive values include props, state, and all the variables and functions declared directly inside your component body. If your linter is [configured for React](/learn/editor-setup#linting), it will verify that every reactive value is correctly specified as a dependency. The list of dependencies must have a constant number of items and be written inline like `[dep1, dep2, dep3]`. React will compare each dependency with its previous value using the [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) comparison algorithm. If you don't specify the dependencies at all, your Effect will re-run after every re-render of the component.
+* `setup`：处理副作用的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
 
-#### Returns {/*returns*/}
+* **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证每个响应式值都被正确地指定为一个依赖项。依赖项列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行副作用函数。
 
-`useInsertionEffect` returns `undefined`.
+#### 返回值 {/*returns*/}
 
-#### Caveats {/*caveats*/}
+`useInsertionEffect` 返回 `undefined`。
 
-* Effects only run on the client. They don't run during server rendering.
-* You can't update state from inside `useInsertionEffect`.
-* By the time `useInsertionEffect` runs, refs are not attached yet, and DOM is not yet updated.
+#### 注意事项 {/*caveats*/}
+
+* Effect 只在客户端上运行，在服务端渲染中不会运行。
+* 你不能在 `useInsertionEffect` 内部更新 state。
+* 在 `useInsertionEffect` 运行期间，refs 还没有附加，DOM 也还没有更新。
 
 ---
 
-## Usage {/*usage*/}
+## 用法 {/*usage*/}
 
-### Injecting dynamic styles from CSS-in-JS libraries {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
+### 从 CSS-in-JS 库中注入动态样式 {/*injecting-dynamic-styles-from-css-in-js-libraries*/}
 
-Traditionally, you would style React components using plain CSS.
+传统上，你会使用纯 CSS 为 React 组件设置样式。
 
 ```js
-// In your JS file:
+// 在你的 JS 文件中：
 <button className="success" />
 
-// In your CSS file:
+// 在你的 CSS 文件中：
 .success { color: green; }
 ```
 
-Some teams prefer to author styles directly in JavaScript code instead of writing CSS files. This usually requires using a CSS-in-JS library or a tool. There are three common approaches to CSS-in-JS:
+有些团队更喜欢直接在 JavaScript 代码中编写样式，而不是编写 CSS 文件。这通常需要使用 CSS-in-JS 库或工具。以下是 CSS-in-JS 三种常见的实现方法：
 
-1. Static extraction to CSS files with a compiler
-2. Inline styles, e.g. `<div style={{ opacity: 1 }}>`
-3. Runtime injection of `<style>` tags
+1. 使用编译器静态提取到 CSS 文件
+2. 内联样式，例如 `<div style={{ opacity: 1 }}>`
+3. 运行时注入 `<style>` 标签
 
-If you use CSS-in-JS, we recommend a combination of the first two approaches (CSS files for static styles, inline styles for dynamic styles). **We don't recommend runtime `<style>` tag injection for two reasons:**
+如果你使用 CSS-in-JS，我们建议结合使用前两种方法（静态样式使用 CSS 文件，动态样式使用内联样式）。**我们不建议运行时注入 `<style>` 标签有两个原因：**
 
-1. Runtime injection forces the browser to recalculate the styles a lot more often.
-2. Runtime injection can be very slow if it happens at the wrong time in the React lifecycle.
+1. 运行时注入会使浏览器频繁地重新计算样式。
+2. 如果运行时注入发生在 React 生命周期的错误时间，它可能会非常慢。
 
-The first problem is not solvable, but `useInsertionEffect` helps you solve the second problem.
+第一个问题无法解决，但是 `useInsertionEffect` 可以帮助你解决第二个问题。
 
-Call `useInsertionEffect` to insert the styles before any DOM mutations:
+调用 `useInsertionEffect` 以在任何 DOM 变化之前注入样式：
 
 ```js {4-11}
-// Inside your CSS-in-JS library
+// 在你的 CSS-in-JS 库中
 let isInserted = new Set();
 function useCSS(rule) {
   useInsertionEffect(() => {
-    // As explained earlier, we don't recommend runtime injection of <style> tags.
-    // But if you have to do it, then it's important to do in useInsertionEffect.
+    // 同前所述，我们不建议在运行时注入 <style> 标签。
+    // 如果你必须这样做，那么应当在 useInsertionEffect 中进行。
     if (!isInserted.has(rule)) {
       isInserted.add(rule);
       document.head.appendChild(getStyleForRule(rule));
@@ -110,7 +110,7 @@ function Button() {
 }
 ```
 
-Similarly to `useEffect`, `useInsertionEffect` does not run on the server. If you need to collect which CSS rules have been used on the server, you can do it during rendering:
+与 `useEffect` 类似，`useInsertionEffect` 不在服务端运行。如果你需要收集在服务端上使用了哪些 CSS 规则，你可以在渲染期间进行：
 
 ```js {1,4-6}
 let collectedRulesSet = new Set();
@@ -126,14 +126,14 @@ function useCSS(rule) {
 }
 ```
 
-[Read more about upgrading CSS-in-JS libraries with runtime injection to `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
+[阅读更多将 `useInsertionEffect` 应用于带有运行时注入的 CSS-in-JS 库的相关信息](https://github.com/reactwg/react-18/discussions/110)
 
 <DeepDive>
 
-#### How is this better than injecting styles during rendering or useLayoutEffect? {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
+#### 这与渲染期间或 useLayoutEffect 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
-If you insert styles during rendering and React is processing a [non-blocking update,](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition) the browser will recalculate the styles every single frame while rendering a component tree, which can be **extremely slow.**
+如果你在渲染期间注入样式并且 React 正在处理[非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会**非常慢**。
 
-`useInsertionEffect` is better than inserting styles during [`useLayoutEffect`](/reference/react/useLayoutEffect) or [`useEffect`](/reference/react/useEffect) because it ensures that by the time other Effects run in your components, the `<style>` tags have already been inserted. Otherwise, layout calculations in regular Effects would be wrong due to outdated styles.
+`useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它确保其他 Effect 在你的组件中运行时，`<style>` 标签已经被注入。否则，常规 Effect 中的布局计算将由于过时的样式而出错。
 
 </DeepDive>

From 260b1ce5cdfc2d047f06ff879b54301d1cdd55ec Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:10:16 +0800
Subject: [PATCH 02/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 910b3d66da..110b1ad76a 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -4,7 +4,7 @@ title: useInsertionEffect
 
 <Pitfall>
 
-`useInsertionEffect` 适用于 CSS-in-JS 库作者。除非你正在使用 CSS-in-JS 库并且需要注入样式，否则你应该使用 [`useEffect`](/reference/react/useEffect) 或者 [`useLayoutEffect`](/reference/react/useLayoutEffect)。
+`useInsertionEffect` 是为 CSS-in-JS 库的作者特意打造的。除非你正在使用 CSS-in-JS 库并且需要注入样式，否则你应该使用 [`useEffect`](/reference/react/useEffect) 或者 [`useLayoutEffect`](/reference/react/useLayoutEffect)。
 
 </Pitfall>
 

From b27848adc44e712b67f31657e43149eeac3aa794 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:10:44 +0800
Subject: [PATCH 03/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 110b1ad76a..e95aec12fc 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -40,7 +40,7 @@ function useCSS(rule) {
 }
 ```
 
-[请参考下方更多示例](#usage)
+[请参考下方更多示例](#usage)。
 
 #### 参数 {/*parameters*/}
 

From 8e5641c05aeffe6282eb7d17b9bdcb2a128bd51b Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:12:27 +0800
Subject: [PATCH 04/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index e95aec12fc..67a81062c3 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -44,7 +44,7 @@ function useCSS(rule) {
 
 #### 参数 {/*parameters*/}
 
-* `setup`：处理副作用的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，React 将首先使用旧值运行 cleanup 函数（如果你提供了该函数），然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
+* `setup`：处理副作用的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，如果你提供了 cleanup 函数，那么 React 将首先使用旧值运行该函数，然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
 
 * **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证每个响应式值都被正确地指定为一个依赖项。依赖项列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行副作用函数。
 

From 771dfdbfbc54aba5362418b0173a4f19f0153c7f Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:12:38 +0800
Subject: [PATCH 05/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 67a81062c3..019d8a8f6a 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -132,7 +132,7 @@ function useCSS(rule) {
 
 #### 这与渲染期间或 useLayoutEffect 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
-如果你在渲染期间注入样式并且 React 正在处理[非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会**非常慢**。
+如果你在渲染期间注入样式并且 React 正在处理 [非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会 **非常慢**。
 
 `useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它确保其他 Effect 在你的组件中运行时，`<style>` 标签已经被注入。否则，常规 Effect 中的布局计算将由于过时的样式而出错。
 

From 86613739d5d0a5998b02f3398b04c0e7d333dbd1 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:12:50 +0800
Subject: [PATCH 06/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 019d8a8f6a..b2b4cb54f8 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -130,7 +130,7 @@ function useCSS(rule) {
 
 <DeepDive>
 
-#### 这与渲染期间或 useLayoutEffect 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
+#### 这与渲染期间或 `useLayoutEffect` 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
 如果你在渲染期间注入样式并且 React 正在处理 [非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会 **非常慢**。
 

From 847c2174ceb2b2b6899aa1b98a16d74571b4878a Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Sun, 21 May 2023 18:13:02 +0800
Subject: [PATCH 07/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index b2b4cb54f8..4964d5eccb 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -80,7 +80,7 @@ function useCSS(rule) {
 2. 内联样式，例如 `<div style={{ opacity: 1 }}>`
 3. 运行时注入 `<style>` 标签
 
-如果你使用 CSS-in-JS，我们建议结合使用前两种方法（静态样式使用 CSS 文件，动态样式使用内联样式）。**我们不建议运行时注入 `<style>` 标签有两个原因：**
+如果你使用 CSS-in-JS，我们建议结合使用前两种方法（静态样式使用 CSS 文件，动态样式使用内联样式）。**我们不建议运行时注入 `<style>` 标签有两个原因**：
 
 1. 运行时注入会使浏览器频繁地重新计算样式。
 2. 如果运行时注入发生在 React 生命周期的错误时间，它可能会非常慢。

From 6140c63da0bc0861120f794675dab2c75f88277a Mon Sep 17 00:00:00 2001
From: newvo1d <keleizhu@126.com>
Date: Sun, 21 May 2023 18:45:36 +0800
Subject: [PATCH 08/17] edited inappropriate part

---
 src/content/reference/react/useInsertionEffect.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 4964d5eccb..7fa16a5387 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -10,7 +10,7 @@ title: useInsertionEffect
 
 <Intro>
 
-`useInsertionEffect` 是 [`useEffect`](/reference/react/useEffect) 的一个版本，在任何 DOM 变化前触发。
+`useInsertionEffect` 是 [`useEffect`](/reference/react/useEffect) 的另一种实现，在任何 DOM 变化前触发。
 
 ```js
 useInsertionEffect(setup, dependencies?)
@@ -44,9 +44,9 @@ function useCSS(rule) {
 
 #### 参数 {/*parameters*/}
 
-* `setup`：处理副作用的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，如果你提供了 cleanup 函数，那么 React 将首先使用旧值运行该函数，然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
+* `setup`：处理 Effect 的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，如果你提供了 cleanup 函数，那么 React 将首先使用旧值运行该函数，然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
 
-* **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证每个响应式值都被正确地指定为一个依赖项。依赖项列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行副作用函数。
+* **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证每个响应式值都被正确地指定为一个依赖项。依赖项列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行 Effect。
 
 #### 返回值 {/*returns*/}
 
@@ -134,6 +134,6 @@ function useCSS(rule) {
 
 如果你在渲染期间注入样式并且 React 正在处理 [非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会 **非常慢**。
 
-`useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它确保其他 Effect 在你的组件中运行时，`<style>` 标签已经被注入。否则，常规 Effect 中的布局计算将由于过时的样式而出错。
+`useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它确保其他 Effect 在你的组件中运行时，`<style>` 标签已经被注入。否则，正常的 Effect 中的布局计算将由于过时的样式而出错。
 
 </DeepDive>

From 30b76c3de4302b867af152c37aaefd97c86cf1f7 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Tue, 30 May 2023 09:08:36 +0800
Subject: [PATCH 09/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 7fa16a5387..cf91164598 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -130,7 +130,7 @@ function useCSS(rule) {
 
 <DeepDive>
 
-#### 这与渲染期间或 `useLayoutEffect` 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
+#### 这与在渲染期间或 `useLayoutEffect` 中注入样式相比有何优势？ {/*how-is-this-better-than-injecting-styles-during-rendering-or-uselayouteffect*/}
 
 如果你在渲染期间注入样式并且 React 正在处理 [非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会 **非常慢**。
 

From df0a49ae7d0d42cf54e6a12d042c9ecd44a8da21 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Tue, 30 May 2023 09:08:57 +0800
Subject: [PATCH 10/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index cf91164598..7a385e5274 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -126,7 +126,7 @@ function useCSS(rule) {
 }
 ```
 
-[阅读更多将 `useInsertionEffect` 应用于带有运行时注入的 CSS-in-JS 库的相关信息](https://github.com/reactwg/react-18/discussions/110)
+[阅读更多将 `useInsertionEffect` 应用于带有运行时注入的 CSS-in-JS 库的相关信息](https://github.com/reactwg/react-18/discussions/110)。
 
 <DeepDive>
 

From 15b24efe849ee8e55dcedb79e94ea370983c04cd Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Tue, 30 May 2023 09:09:16 +0800
Subject: [PATCH 11/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 7a385e5274..1b9d9eb275 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -55,7 +55,7 @@ function useCSS(rule) {
 #### 注意事项 {/*caveats*/}
 
 * Effect 只在客户端上运行，在服务端渲染中不会运行。
-* 你不能在 `useInsertionEffect` 内部更新 state。
+* 避免在 `useInsertionEffect` 内部更新 state。
 * 在 `useInsertionEffect` 运行期间，refs 还没有附加，DOM 也还没有更新。
 
 ---

From 9267df59b51bdeed9e889a095fdcb8d7d1f26e46 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Tue, 30 May 2023 13:31:07 +0800
Subject: [PATCH 12/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Yucohny <79147654+Yucohny@users.noreply.github.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 1b9d9eb275..dad16b8d8f 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -56,7 +56,7 @@ function useCSS(rule) {
 
 * Effect 只在客户端上运行，在服务端渲染中不会运行。
 * 避免在 `useInsertionEffect` 内部更新 state。
-* 在 `useInsertionEffect` 运行期间，refs 还没有附加，DOM 也还没有更新。
+* 在 `useInsertionEffect` 运行期间，ref 还没有附加，DOM 也还没有更新。
 
 ---
 

From ec6894cbdef0cebb406aa1127478e21b783c76b6 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Fri, 2 Jun 2023 21:48:13 +0800
Subject: [PATCH 13/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Xleine <919143384@qq.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index dad16b8d8f..af028f4c75 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -10,7 +10,7 @@ title: useInsertionEffect
 
 <Intro>
 
-`useInsertionEffect` 是 [`useEffect`](/reference/react/useEffect) 的另一种实现，在任何 DOM 变化前触发。
+`useInsertionEffect` 是 [`useEffect`](/reference/react/useEffect) 的另一种实现，会在任何 DOM 变化前触发。
 
 ```js
 useInsertionEffect(setup, dependencies?)

From 4ef921691da9c4e2f1361f6f9d37b2e9c958b63f Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Fri, 2 Jun 2023 21:48:30 +0800
Subject: [PATCH 14/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Xleine <919143384@qq.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index af028f4c75..a5d7582bfa 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -126,7 +126,7 @@ function useCSS(rule) {
 }
 ```
 
-[阅读更多将 `useInsertionEffect` 应用于带有运行时注入的 CSS-in-JS 库的相关信息](https://github.com/reactwg/react-18/discussions/110)。
+[阅读更多使用 `useInsertionEffect` 升级 CSS-in-JS 库的相关指南](https://github.com/reactwg/react-18/discussions/110)。
 
 <DeepDive>
 

From a588cef41ac4a6961bbc122617768fd14c7405f2 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Fri, 2 Jun 2023 22:27:34 +0800
Subject: [PATCH 15/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Xleine <919143384@qq.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index a5d7582bfa..1517ff6e46 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -83,7 +83,7 @@ function useCSS(rule) {
 如果你使用 CSS-in-JS，我们建议结合使用前两种方法（静态样式使用 CSS 文件，动态样式使用内联样式）。**我们不建议运行时注入 `<style>` 标签有两个原因**：
 
 1. 运行时注入会使浏览器频繁地重新计算样式。
-2. 如果运行时注入发生在 React 生命周期的错误时间，它可能会非常慢。
+2. 如果在 React 生命周期中某个错误的时机进行运行时注入，它可能会非常慢。
 
 第一个问题无法解决，但是 `useInsertionEffect` 可以帮助你解决第二个问题。
 

From f35b08ebaf8f578757bf03deda9e0783bb7548b4 Mon Sep 17 00:00:00 2001
From: NewVo1d <89888306+NewVo1d@users.noreply.github.com>
Date: Fri, 2 Jun 2023 22:28:07 +0800
Subject: [PATCH 16/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Xleine <919143384@qq.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index 1517ff6e46..f84e170d53 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -46,7 +46,7 @@ function useCSS(rule) {
 
 * `setup`：处理 Effect 的函数。setup 函数选择性返回一个 **清理（cleanup）** 函数。在将组件首次添加到 DOM 之前，React 将运行 setup 函数。在每次依赖项变更重新渲染后，如果你提供了 cleanup 函数，那么 React 将首先使用旧值运行该函数，然后使用新值运行 setup 函数。在组件从 DOM 中移除前，React 将运行 cleanup 函数。
 
-* **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证每个响应式值都被正确地指定为一个依赖项。依赖项列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则在每次重新渲染组件之后，将重新运行 Effect。
+* **可选** `dependencies`：`setup` 代码中引用的所有响应式值的列表。响应式值包括 props、state 以及所有直接在组件内部声明的变量和函数。如果你的代码检查工具 [配置了 React](/learn/editor-setup#linting)，那么它将验证是否每个响应式值都被正确地指定为依赖项。依赖列表必须具有固定数量的项，并且必须像 `[dep1, dep2, dep3]` 这样内联编写。React 将使用 [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) 来比较每个依赖项和它先前的值。如果省略此参数，则将在每次重新渲染组件之后重新运行 Effect。
 
 #### 返回值 {/*returns*/}
 

From a85bc25a01e885d9f12d2df6a0cf291c24935357 Mon Sep 17 00:00:00 2001
From: Yucohny <79147654+Yucohny@users.noreply.github.com>
Date: Fri, 16 Jun 2023 14:17:58 +0800
Subject: [PATCH 17/17] Update
 src/content/reference/react/useInsertionEffect.md

Co-authored-by: Xleine <919143384@qq.com>
---
 src/content/reference/react/useInsertionEffect.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/content/reference/react/useInsertionEffect.md b/src/content/reference/react/useInsertionEffect.md
index f84e170d53..5a8503e1a4 100644
--- a/src/content/reference/react/useInsertionEffect.md
+++ b/src/content/reference/react/useInsertionEffect.md
@@ -134,6 +134,6 @@ function useCSS(rule) {
 
 如果你在渲染期间注入样式并且 React 正在处理 [非阻塞更新](/reference/react/useTransition#marking-a-state-update-as-a-non-blocking-transition)，那么浏览器将在渲染组件树时每一帧都会重新计算样式，这可能会 **非常慢**。
 
-`useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它确保其他 Effect 在你的组件中运行时，`<style>` 标签已经被注入。否则，正常的 Effect 中的布局计算将由于过时的样式而出错。
+`useInsertionEffect` 比在 [`useLayoutEffect`](/reference/react/useLayoutEffect) 或 [`useEffect`](/reference/react/useEffect) 期间注入样式更好。因为它会确保 `<style>` 标签在其它 Effect 运行前被注入。否则，正常的 Effect 中的布局计算将由于过时的样式而出错。
 
 </DeepDive>