You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react/useInsertionEffect.md
+39-39Lines changed: 39 additions & 39 deletions
Original file line number
Diff line number
Diff line change
@@ -4,13 +4,13 @@ title: useInsertionEffect
4
4
5
5
<Pitfall>
6
6
7
-
`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.
Call`useInsertionEffect`to insert the styles before any DOM mutations:
29
+
调用`useInsertionEffect`以在任何 DOM 变化之前注入样式：
30
30
31
31
```js
32
32
import { useInsertionEffect } from'react';
33
33
34
-
//Inside your CSS-in-JS library
34
+
//在你的 CSS-in-JS 库中
35
35
functionuseCSS(rule) {
36
36
useInsertionEffect(() => {
37
-
// ... inject <style> tags here ...
37
+
// ... 在此注入 <style> 标签 ...
38
38
});
39
39
return rule;
40
40
}
41
41
```
42
42
43
-
[See more examples below.](#usage)
43
+
[请参考下方更多示例](#usage)。
44
44
45
-
#### Parameters {/*parameters*/}
45
+
#### 参数 {/*parameters*/}
46
46
47
-
* `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.
48
-
49
-
* **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.
Traditionally, you would style React components using plain CSS.
67
+
传统上，你会使用纯 CSS 为 React 组件设置样式。
68
68
69
69
```js
70
-
//In your JS file:
70
+
//在你的 JS 文件中：
71
71
<button className="success"/>
72
72
73
-
//In your CSS file:
73
+
//在你的 CSS 文件中：
74
74
.success { color: green; }
75
75
```
76
76
77
-
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:
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:**
1. Runtime injection forces the browser to recalculate the styles a lot more often.
86
-
2. Runtime injection can be very slow if it happens at the wrong time in the React lifecycle.
85
+
1. 运行时注入会使浏览器频繁地重新计算样式。
86
+
2. 如果在 React 生命周期中某个错误的时机进行运行时注入，它可能会非常慢。
87
87
88
-
The first problem is not solvable, but `useInsertionEffect`helps you solve the second problem.
88
+
第一个问题无法解决，但是 `useInsertionEffect`可以帮助你解决第二个问题。
89
89
90
-
Call`useInsertionEffect`to insert the styles before any DOM mutations:
90
+
调用`useInsertionEffect`以在任何 DOM 变化之前注入样式：
91
91
92
92
```js {4-11}
93
-
//Inside your CSS-in-JS library
93
+
//在你的 CSS-in-JS 库中
94
94
let isInserted =newSet();
95
95
functionuseCSS(rule) {
96
96
useInsertionEffect(() => {
97
-
//As explained earlier, we don't recommend runtime injection of <style> tags.
98
-
//But if you have to do it, then it's important to do in useInsertionEffect.
97
+
//同前所述，我们不建议在运行时注入 <style> 标签。
98
+
//如果你必须这样做，那么应当在 useInsertionEffect 中进行。
99
99
if (!isInserted.has(rule)) {
100
100
isInserted.add(rule);
101
101
document.head.appendChild(getStyleForRule(rule));
@@ -110,7 +110,7 @@ function Button() {
110
110
}
111
111
```
112
112
113
-
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:
[Read more about upgrading CSS-in-JS libraries with runtime injection to `useInsertionEffect`.](https://github.com/reactwg/react-18/discussions/110)
#### How is this better than injecting styles during rendering or 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.**
`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.
0 commit comments