Skip to content

Commit e193d1e

Browse files
committed
fix(reference/react): apply markdown formatting rules to Fragment, StrictMode and ViewTransition
- Convert italic (*text* / _text_) to bold (**text**) per translation style - Move trailing punctuation outside bold markers (**text。** → **text**。)
1 parent 64a776f commit e193d1e

3 files changed

Lines changed: 14 additions & 14 deletions

File tree

src/content/reference/react/Fragment.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,25 +36,25 @@ title: <Fragment> (<>...</>)
3636

3737
当你将 ref 传递给 Fragment 时,React 会提供一个 `FragmentInstance` 对象,其中包含用于与 Fragment 包裹的 DOM 节点进行交互的方法:
3838

39-
**事件处理方法**
39+
**事件处理方法**
4040
- `addEventListener(type, listener, options?)`:向 Fragment 的所有第一级 DOM 子元素添加事件监听器。
4141
- `removeEventListener(type, listener, options?)`:从 Fragment 的所有第一级 DOM 子元素中移除事件监听器。
4242
- `dispatchEvent(event)`:向 Fragment 的虚拟子元素分发事件以调用任何已添加的监听器,并且可以冒泡到 DOM 父元素。
4343

44-
**布局方法**
44+
**布局方法**
4545
- `compareDocumentPosition(otherNode)`:比较 Fragment 与另一个节点的文档位置。
4646
- 如果 Fragment 有子元素,则返回原生的 `compareDocumentPosition` 值。
4747
- 空的 Fragment 会尝试在 React 树中比较位置,并包含 `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`
4848
- 由于 portal 或其他插入方式导致在 React 树和 DOM 树中关系不同的元素,将返回 `Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC`
4949
- `getClientRects()`:返回一个扁平数组,包含表示所有子元素边界矩形的 `DOMRect` 对象。
5050
- `getRootNode()`:返回包含 Fragment 父 DOM 节点的根节点。
5151

52-
**焦点管理方法**
52+
**焦点管理方法**
5353
- `focus(options?)`:聚焦 Fragment 中的第一个可聚焦 DOM 节点。会以深度优先的方式尝试聚焦嵌套的子元素。
5454
- `focusLast(options?)`:聚焦 Fragment 中的最后一个可聚焦 DOM 节点。会以深度优先的方式尝试聚焦嵌套的子元素。
5555
- `blur()`:如果 `document.activeElement` 在 Fragment 内部,则移除焦点。
5656

57-
**观察者方法**
57+
**观察者方法**
5858
- `observeUsing(observer)`:使用 IntersectionObserver 或 ResizeObserver 开始观察 Fragment 的 DOM 子元素。
5959
- `unobserveUsing(observer)`:停止使用指定的观察者观察 Fragment 的 DOM 子元素。
6060

src/content/reference/react/StrictMode.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ root.render(
9191
- 组件将 [额外重新运行一次 refs 回调](#fixing-bugs-found-by-re-running-ref-callbacks-in-development) 以查找由于缺少 ref 清理函数而引起的错误。
9292
- 组件将被 [检查是否使用了已弃用的 API](#fixing-deprecation-warnings-enabled-by-strict-mode)
9393

94-
**所有这些检查仅在开发环境中进行,不会影响生产构建**
94+
**所有这些检查仅在开发环境中进行,不会影响生产构建**
9595

9696
</Note>
9797

@@ -828,7 +828,7 @@ button { margin-left: 10px; }
828828
829829
请注意,控制台中活跃连接的数量不再持续增加。
830830
831-
在没有严格模式的情况下,很容易忽视你的 Effect 需要进行清理的情况。通过在开发中运行 *setup → cleanup → setup*,而不是仅运行 *setup*,严格模式使你更容易发现遗漏的 cleanup 逻辑。
831+
在没有严格模式的情况下,很容易忽视你的 Effect 需要进行清理的情况。通过在开发中运行 **setup → cleanup → setup**,而不是仅运行 **setup**,严格模式使你更容易发现遗漏的 cleanup 逻辑。
832832
833833
[请阅读更多关于实现 Effect 清理的内容](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)。
834834
@@ -837,7 +837,7 @@ button { margin-left: 10px; }
837837
838838
严格模式也可以帮助发现[回调 ref](/learn/manipulating-the-dom-with-refs) 中的错误。
839839
840-
每个回调 `ref` 都有一些 setup 代码,以及可能的 cleanup 代码。通常,当元素被*创建*(添加到 DOM)时,React 会调用 setup;当元素被*移除*(从 DOM 中移除)时,React 会调用 cleanup。
840+
每个回调 `ref` 都有一些 setup 代码,以及可能的 cleanup 代码。通常,当元素被**创建**(添加到 DOM)时,React 会调用 setup;当元素被**移除**(从 DOM 中移除)时,React 会调用 cleanup。
841841
842842
当开启严格模式时,React 还会在开发模式下为每个回调 `ref` **额外运行一次 setup+cleanup 循环**。这可能会让人感到惊讶,但它有助于发现手动难以捕捉到的细微错误。
843843
@@ -960,7 +960,7 @@ li {
960960
</Sandpack>
961961
962962
963-
**这是一个生产环境的错误!** 由于 ref 回调没有在清理时从列表中移除动物,动物列表会持续增长。这是一处内存泄漏,会在实际应用中引发性能问题,并破坏应用的行为。
963+
**这是一个生产环境的错误**! 由于 ref 回调没有在清理时从列表中移除动物,动物列表会持续增长。这是一处内存泄漏,会在实际应用中引发性能问题,并破坏应用的行为。
964964
965965
问题在于 ref 回调没有在自身之后进行清理:
966966
@@ -1102,7 +1102,7 @@ li {
11021102
11031103
**在严格模式下,你立即就能看到存在问题**。严格模式为每个回调 ref 运行额外一次 setup+cleanup 循环。这个回调 ref 没有 cleanup 逻辑,所以它添加了 ref 但没有移除它们。这是一个提示,你可能忘记了添加清理函数。
11041104
1105-
严格模式让你能够及早发现回调 ref 中的错误。当你在严格模式下通过添加清理函数来修复回调时,你也*同时*修复了许多可能在未来的生产环境中出现的错误,比如之前的「滚动到」错误:
1105+
严格模式让你能够及早发现回调 ref 中的错误。当你在严格模式下通过添加清理函数来修复回调时,你也**同时**修复了许多可能在未来的生产环境中出现的错误,比如之前的「滚动到」错误:
11061106
11071107
<Sandpack>
11081108
@@ -1237,7 +1237,7 @@ li {
12371237
✅ 将猫添加到 map 中。当前猫的总数:10
12381238
```
12391239
1240-
**这是符合预期的。** 严格模式确认了 ref 回调被正确清理,因此数量永远不会超过预期值。修复之后,不存在内存泄漏,所有功能都按预期工作。
1240+
**这是符合预期的**。 严格模式确认了 ref 回调被正确清理,因此数量永远不会超过预期值。修复之后,不存在内存泄漏,所有功能都按预期工作。
12411241
12421242
在没有严格模式的情况下,直到你在应用中点击并注意到功能被破坏之前,很容易忽视这个错误。严格模式让错误立即显现,避免在你将其推送到生产环境之前才被发现。
12431243

src/content/reference/react/ViewTransition.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ version: canary
99

1010
<Canary>
1111

12-
**`<ViewTransition />` API 目前仅在 React 的 Canary 和实验通道中可用**
12+
**`<ViewTransition />` API 目前仅在 React 的 Canary 和实验通道中可用**
1313

1414
[点击此处了解更多关于 React 发布渠道的信息。](/community/versioning-policy#all-release-channels)
1515

@@ -449,7 +449,7 @@ button:hover {
449449

450450
#### 只有顶层的 ViewTransition 才会在退出/进入时动画化 {/*only-top-level-viewtransition-animates-on-exit-enter*/}
451451

452-
`<ViewTransition>` 只有放置在任何 DOM 节点_之前_才会激活退出/进入。
452+
`<ViewTransition>` 只有放置在任何 DOM 节点**之前**才会激活退出/进入。
453453

454454
如果 `<ViewTransition>` 上方有一个 `<div>`,则不会触发退出/进入动画:
455455

@@ -1270,7 +1270,7 @@ items.map(item => <div><Component key={item.id} item={item} /></div>)
12701270

12711271
根据你放置 `<ViewTransition>` 的位置,有两种方式可以为 Suspense 边界添加动画:
12721272

1273-
**更新**
1273+
**更新**
12741274

12751275
```
12761276
<ViewTransition>
@@ -1506,7 +1506,7 @@ button:hover {
15061506

15071507
</Sandpack>
15081508

1509-
**进入/退出**
1509+
**进入/退出**
15101510

15111511
```
15121512
<Suspense fallback={<ViewTransition><A /></ViewTransition>}>

0 commit comments

Comments
 (0)