Skip to content

Commit

Permalink
docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ 9748943
Browse files Browse the repository at this point in the history
  • Loading branch information
awxiaoxian2020 authored Apr 1, 2024
2 parents 3fead3a + 8b5d33b commit 7a3230b
Show file tree
Hide file tree
Showing 20 changed files with 182 additions and 93 deletions.
1 change: 1 addition & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ Ignore this rule if you're specifically describing an experimental proposal. Mak
- Use semicolons.
- No space between function names and parens (`method() {}` not `method () {}`).
- When in doubt, use the default style favored by [Prettier](https://prettier.io/playground/).
- Always capitalize React concepts such as Hooks, Effects, and Transitions.

### Highlighting

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@
"webpack-bundle-analyzer": "^4.5.0"
},
"engines": {
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
"node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0"
},
"nextBundleAnalysis": {
"budget": null,
Expand Down
Binary file added public/images/team/jack-pope.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 5 additions & 5 deletions src/content/blog/2022/03/08/react-18-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -225,15 +225,15 @@ function handleClick() {
在 React 18 工作组,我们和第三方库的维护者合作,创建需要支持 styles 和外部存储中的特定用例的并发渲染的新 API。为了支持 React 18,一些第三方库可能需要切换到下面的 API 之一:

* `useSyncExternalStore` 是一个新增 Hook,它允许外部存储通过对 store 的强制更新保持同步从而支持并发读取。这个新 API 推荐用于任何和 React 的外部状态集成的库。了解更多信息请查看 [useSyncExternalStore 概览](https://github.com/reactwg/react-18/discussions/70)[useSyncExternalStore API 细节](https://github.com/reactwg/react-18/discussions/86)
* `useInsertionEffect` 是一个新增 Hook,它可以让 CSS-in-JS 库解决渲染中注入样式的性能问题。我们希望只有在你已经构建了一个 CSS-in-JS 库的情况下才使用它。这个 Hook 会在 DOM 变化之后,layout effect 读取新的布局之前运行。这解决了 React 17 及其以下就已经存在但是在 React 18 更重要的问题,因为在并发渲染期间 React 会阻止浏览器,给了它一个重新计算布局的机会。了解更多信息,查看 [`<style>` 库升级指南](https://github.com/reactwg/react-18/discussions/110)
* `useInsertionEffect` 是一个新增 Hook,它可以让 CSS-in-JS 库解决渲染中注入样式的性能问题。我们希望只有在你已经构建了一个 CSS-in-JS 库的情况下才使用它。这个 Hook 会在 DOM 变化之后,layout Effect 读取新的布局之前运行。这解决了 React 17 及其以下就已经存在但是在 React 18 更重要的问题,因为在并发渲染期间 React 会阻止浏览器,给了它一个重新计算布局的机会。了解更多信息,查看 [`<style>` 库升级指南](https://github.com/reactwg/react-18/discussions/110)

React 18 也引入了一些并发渲染的新 API,例如 `startTransition``useDeferredValue` 以及 `useId`,关于此更多信息我们在 [发布报告](/blog/2022/03/29/react-v18) 中有所分享。

## 严格模式的变化 {/*updates-to-strict-mode*/}

在未来,我们想要添加一个特性,它允许 React 在保存 state 的时候添加和移除 UI 块。例如,当用户离开当前 tab 页面又返回时,React 应该能够立刻展示之前的页面。为了达到这个目的,React 会使用和之前一样的组件状态来卸载和重新加载树。

这个特性会让 React 拥有更好的开箱即用性能,但是它需要组件能够灵活应对多次加载和销毁的 effect。大部分 effect 工作方式没有任何变化,但是一些 effect 希望它们只加载或者销毁一次。
这个特性会让 React 拥有更好的开箱即用性能,但是它需要组件能够灵活应对多次加载和销毁的 effect。大部分 Effect 工作方式没有任何变化,但是一些 Effect 希望它们只加载或者销毁一次。

为了帮助让这些问题浮出水面,React 18 向严格模式中引入了一个只在开发环境进行的新检查。每当组件第一次加载时,新的检查会自动卸载和重新加载每一个组件,并在第二次加载的时候存储之前的状态。

Expand All @@ -255,8 +255,8 @@ React 18 也引入了一些并发渲染的新 API,例如 `startTransition`、`
* 销毁 Layout effect。
* 销毁 Effect effect。
* React 模仿加载有上一个状态的组件。
* 运行 Layout effect setup 代码
* 运行 Effect effect setup 代码
* 运行 Layout Effect setup 代码
* 运行 Effect Effect setup 代码
```

了解更多信息,可以查看工作组的文章:[向严格模式添加可复用的状态](https://github.com/reactwg/react-18/discussions/19)[如何支持 Effect 中的可复用状态](https://github.com/reactwg/react-18/discussions/18)
Expand Down Expand Up @@ -302,7 +302,7 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true;

## 其他破坏性变更 {/*other-breaking-changes*/}

* **一致的 useEffect 时间**:现在,如果更新是在类似点击或者敲击键盘事件这样的离散用户输入事件期间触发,React 总是同步刷新 effect 函数。而之前的行为不是一直可预测或者一致的。
* **一致的 useEffect 时间**:现在,如果更新是在类似点击或者敲击键盘事件这样的离散用户输入事件期间触发,React 总是同步刷新 Effect 函数。而之前的行为不是一直可预测或者一致的。
* **更严格的 hydrate 报错**:由于缺失或者额外的文本而导致的 hydrate 不匹配现在会作为错误而不是告警对待。React 将不再试图通过在客户端增加或删除节点来“修补”单个节点来匹配服务端标记,并且将会回退客户端渲染到树中最近的 `<Suspense>` 边界。这可以保证 hydrate 树保持一致并且避免可能由 hydrate 不匹配导致的隐私和安全漏洞。
* **Suspense 树一直保持一致**:如果一个组件在它完全被添加到树上之前挂起,React 将不会把它以不完整的状态添加到树或者触发它的 effect。React 会完全扔掉新树,等待异步操作结束,然后重新尝试从头开始再次渲染。React 会同时渲染重试尝试,并且不会阻塞浏览器。
* **使用 Suspense 的 Layout Effect**:当一个树重新挂起并恢复为后备方案时,现在的 React 会清理 layout effect,然后在边界内的内容再次显示时重新创建它们。这修复了一个在与 Suspense 一起使用时的问题:阻止组件库正确测量布局。
Expand Down
26 changes: 13 additions & 13 deletions src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ startTransition(() => {

并发渲染中将会加入过渡更新,允许更新被中断。如果更新内容被重新挂起,过渡机制也会告诉 React 在后台渲染过渡内容时继续展示当前内容(查看 [Suspense 意见征求](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) 了解更多信息)。

[更多内容请参阅 transition 相关的文档](/reference/react/useTransition)
[更多内容请参阅 Transition 相关的文档](/reference/react/useTransition)

### 新的 Suspense 特性 {/*new-suspense-features*/}

Expand All @@ -162,7 +162,7 @@ Suspense 使得“UI 加载状态”成为了 React 编程模型中最高级的

在 React 18 中,我们已经支持了服务端 Suspense,并且使用并发渲染特性扩展了其功能。

React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你在 transition 期间挂起,React 不会让已显示的内容被后备方案取代。相反,React 会延迟渲染,直到有足够的数据,以防止出现加载状态错误。
React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你在 Transition 期间挂起,React 不会让已显示的内容被后备方案取代。相反,React 会延迟渲染,直到有足够的数据,以防止出现加载状态错误。

更多内容参见 [React 18 中的 Suspense](https://github.com/reactjs/rfcs/blob/main/text/0213-suspense-in-react-18.md) 的意见征求。

Expand Down Expand Up @@ -204,23 +204,23 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你

```
* React 装载组件
* layout effect 创建
* effect 创建
* layout Effect 创建
* Effect 创建
```


在 React 18 的严格模式下,React 在开发模式下将会模拟组件的卸载和挂载:

```
* React 挂载组件
* layout effect 创建
* effect 创建
* layout Effect 创建
* Effect 创建
* React 模拟卸载组件
* layout effect 销毁
* effect 销毁
* layout Effect 销毁
* Effect 销毁
* React 模拟挂载组件,并复用之前的状态
* layout effect 创建
* effect 创建
* layout Effect 创建
* Effect 创建
```

[参阅确保状态可复用的文档](/reference/react/StrictMode#fixing-bugs-found-by-re-running-effects-in-development)
Expand Down Expand Up @@ -253,7 +253,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
#### useInsertionEffect {/*useinsertioneffect*/}

`useInsertionEffect` 是一个新的 Hook ,允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库,否则我们不希望你使用它。这个 Hook 将在 DOM 变更发生后,在 layout effect 获取新布局之前运行。这个功能不仅解决了一个在 React 17 及以下版本中已经存在的问题,而且在 React 18 中更加重要,因为 React 在并发渲染时会为浏览器让步,给它一个重新计算布局的机会。[参阅文档](/reference/react/useInsertionEffect)
`useInsertionEffect` 是一个新的 Hook ,允许 CSS-in-JS 库解决在渲染中注入样式的性能问题。除非你已经建立了一个 CSS-in-JS 库,否则我们不希望你使用它。这个 Hook 将在 DOM 变更发生后,在 layout Effect 获取新布局之前运行。这个功能不仅解决了一个在 React 17 及以下版本中已经存在的问题,而且在 React 18 中更加重要,因为 React 在并发渲染时会为浏览器让步,给它一个重新计算布局的机会。[参阅文档](/reference/react/useInsertionEffect)

> Note
>
Expand All @@ -273,7 +273,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
* 添加 `startTransition` 作为 `useTransition` 的一个版本,不需要等待反馈。 ([#19696](https://github.com/facebook/react/pull/19696) [@rickhanlonii](https://github.com/rickhanlonii))
* 添加 `useInsertionEffect` 用于 CSS-in-JS 库。([#21913](https://github.com/facebook/react/pull/21913) [@rickhanlonii](https://github.com/rickhanlonii))
* 当内容重新出现时,使 Suspense 重新装载 layout effect。([#19322](https://github.com/facebook/react/pull/19322)[#19374](https://github.com/facebook/react/pull/19374)[#19523](https://github.com/facebook/react/pull/19523)[#20625](https://github.com/facebook/react/pull/20625)[#21079](https://github.com/facebook/react/pull/21079) [@acdlite](https://github.com/acdlite)[@bvaughn](https://github.com/bvaughn),and [@lunaruan](https://github.com/lunaruan))
* 使 `<StrictMode>` 重新运行 effect 以检查可恢复的状态。([#19523](https://github.com/facebook/react/pull/19523)[#21418](https://github.com/facebook/react/pull/21418) [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
* 使 `<StrictMode>` 重新运行 Effect 以检查可恢复的状态。([#19523](https://github.com/facebook/react/pull/19523)[#21418](https://github.com/facebook/react/pull/21418) [@bvaughn](https://github.com/bvaughn) and [@lunaruan](https://github.com/lunaruan))
* 假设 `Symbols` 总是可用的。([#23348](https://github.com/facebook/react/pull/23348) [@sebmarkbage](https://github.com/sebmarkbage))
* 移除 `object-assign` polyfill。([#23351](https://github.com/facebook/react/pull/23351) [@sebmarkbage](https://github.com/sebmarkbage))
* 移除不支持的 `unstable_changedBits` API。([#20953](https://github.com/facebook/react/pull/20953) [@acdlite](https://github.com/acdlite))
Expand Down Expand Up @@ -325,7 +325,7 @@ React 18 中的 Suspense 在与 transition API 结合时效果最好。如果你
* 支持使用 `global.IS_REACT_ACT_ENVIRONMENT` 禁用 act 警告。 ([#22561](https://github.com/facebook/react/pull/22561) [@acdlite](https://github.com/acdlite))
* 扩大 act 警告,以覆盖所有可能预计 React 工作的 API。([#22607](https://github.com/facebook/react/pull/22607) [@acdlite](https://github.com/acdlite))
* 使 act 批量更新。([#21797](https://github.com/facebook/react/pull/21797) [@acdlite](https://github.com/acdlite))
* 移除对被挂起的 effect 的警告。([#22609](https://github.com/facebook/react/pull/22609) [@acdlite](https://github.com/acdlite))
* 移除对被挂起的 Effect 的警告。([#22609](https://github.com/facebook/react/pull/22609) [@acdlite](https://github.com/acdlite))

### React Refresh {/*react-refresh*/}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,6 @@ title: "React Labs:我们正在努力的方向——2022 年 6 月"

去年,我们宣布了新版文档网站的测试版本([后来发布为 react.dev](/blog/2023/03/16/introducing-react-dev))。新的学习材料首先介绍了 Hook,并提供了新的图表、插图,以及许多交互式示例和挑战。之前我们暂时中断了这项工作,专注于 React 18 的发布;但现在 React 18 已经发布,我们正在积极努力完成和发布新的文档。

我们目前正在撰写关于 effect 的详细部分,因为我们听说这是对新手和有经验的 React 用户来说最具挑战性的主题之一。[与 Effect 保持同步](/learn/synchronizing-with-effects) 是系列中首个发布的页面,接下来的几周还会有更多页面发布。当我们开始撰写关于 effect 的详细部分时,我们意识到许多常见的 effect 模式可以通过向 React 添加一个新的原语来简化。我们在 [useEvent RFC](https://github.com/reactjs/rfcs/pull/220) 中分享了一些初步想法。目前还处于早期研究阶段,我们仍在对这个想法进行迭代。我们非常感谢社区对 RFC 的意见,以及对正在进行的文档重写的 [反馈](https://github.com/reactjs/reactjs.org/issues/3308) 和贡献。我们特别要感谢 [Harish Kumar](https://github.com/harish-sethuraman) 为新网站实现提交和审查了许多改进的工作。
我们目前正在撰写关于 Effect 的详细部分,因为我们听说这是对新手和有经验的 React 用户来说最具挑战性的主题之一。[与 Effect 保持同步](/learn/synchronizing-with-effects) 是系列中首个发布的页面,接下来的几周还会有更多页面发布。当我们开始撰写关于 Effect 的详细部分时,我们意识到许多常见的 Effect 模式可以通过向 React 添加一个新的原语来简化。我们在 [useEvent RFC](https://github.com/reactjs/rfcs/pull/220) 中分享了一些初步想法。目前还处于早期研究阶段,我们仍在对这个想法进行迭代。我们非常感谢社区对 RFC 的意见,以及对正在进行的文档重写的 [反馈](https://github.com/reactjs/reactjs.org/issues/3308) 和贡献。我们特别要感谢 [Harish Kumar](https://github.com/harish-sethuraman) 为新网站实现提交和审查了许多改进的工作。

感谢 [Sophie Alpert](https://twitter.com/sophiebits) 对本篇博客文章的审查!
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,9 @@ React 的核心思想是开发人员将其 UI 定义为当前状态的函数。

自上次更新以来,我们在 Meta 的 React Native 应用程序上测试了一个实验性的预渲染版本,包括 Android 和 iOS,性能表现良好。我们还改进了离屏渲染与 Suspense 的配合方式——在离屏树中挂起(suspend)但不会触发 Suspense 后备方案。我们剩下的工作是完成向库开发人员公开的基本组件。我们预计将于今年晚些时候发布一个 RFC,同时发布一个实验性的 API 用于测试和反馈。

## 追踪 transition {/*transition-tracing*/}
## 追踪 Transition {/*transition-tracing*/}

追踪 transition 的 API 可以检测 [React transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React transition 构建的路由非常有用,例如 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router)
追踪 Transition 的 API 可以检测 [React Transition](/reference/react/useTransition) 变慢的原因,并调查为什么会变慢。在上次更新后,我们完成了 API 的初始设计,并发布了一个 [RFC](https://github.com/reactjs/rfcs/pull/238),基本功能也已经实现。该项目目前处于暂停状态。我们欢迎对 RFC 进行反馈,并期待恢复其开发,为 React 提供更好的性能测量工具。这将特别对基于 React Transition 构建的路由非常有用,例如 [Next.js App Router](/learn/start-a-new-react-project#nextjs-app-router)

* * *
除了这个更新,我们的团队最近还在社区播客和直播中客串,更多地讲述我们的工作并回答问题。
Expand Down
1 change: 1 addition & 0 deletions src/content/community/acknowledgements.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ React 从最初由 [Jordan Walke](https://github.com/jordwalke) 创立至今,
* [Andreas Svensson](https://github.com/syranide)
* [Alex Krolick](https://github.com/alexkrolick)
* [Alexey Pyltsyn](https://github.com/lex111)
* [Andrey Lunyov](https://github.com/alunyov)
* [Brandon Dail](https://github.com/aweary)
* [Brian Vaughn](https://github.com/bvaughn)
* [Caleb Meredith](https://github.com/calebmer)
Expand Down
Loading

0 comments on commit 7a3230b

Please sign in to comment.