Skip to content

Commit

Permalink
docs(en): merging all conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
docschina-bot committed Mar 28, 2024
2 parents 4b88ed3 + 9b4de7c commit 64d3f07
Show file tree
Hide file tree
Showing 24 changed files with 440 additions and 25 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
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.
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
9 changes: 9 additions & 0 deletions src/content/community/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,18 +18,27 @@ React 核心团队成员全职致力于核心组件 API 的开发,负责 React
Andrew 最初通过使用 WordPress 来制作网站,进入了网页开发领域,最终他自我投入到 JavaScript 的编程中。他最喜欢的娱乐活动是唱卡拉 OK。根据不同的日子,Andrew 有时候像是迪士尼的反派角色,有时候又像是迪士尼的公主。
</TeamMember>

<<<<<<< HEAD
<TeamMember name="Andrey Lunyov" permalink="andrey-lunyov" photo="/images/team/andrey-lunyov.jpg" github="alunyov" twitter="alunyov" threads="alunyov" title="Engineer at Meta">
Andrey 最初从事设计工作,然后逐渐转行到网页开发。在加入 React Data 团队后,他参与了向 Relay 添加渐进式 JavaScript 编译器的工作,后来又负责从 Relay 中移除了同样的编译器。在工作之余,Andrey 喜欢演奏音乐,参与各种体育活动。
</TeamMember>

<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Engineer at Meta">
Dan 在意外发现 Microsoft PowerPoint 内部的 Visual Basic 后进入了编程行业。他发现了自己的真正使命,就是将 [Sebastian](#sebastian-markbåge) 的推特转化为长篇博客文章。Dan 偶尔会通过整局游戏都躲在草丛里的方式,在《堡垒之夜》中赢得胜利。
=======
<TeamMember name="Dan Abramov" permalink="dan-abramov" photo="/images/team/gaearon.jpg" github="gaearon" twitter="dan_abramov2" title="Independent Engineer">
Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
</TeamMember>
<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" threads="elicwhite" title="Engineering Manager at Meta">
Eli 因为在中学时期的黑客行为被学校暂时开除,从此踏入了编程的世界。自 2017 年起,他就一直致力于 React 和 React Native 的工作。他是个美食爱好者,特别喜欢冰淇淋和苹果派。你常常能发现 Eli 在尝试一些别出心裁的活动,如跑酷、室内跳伞,以及空中丝绸表演。
</TeamMember>

<TeamMember name="Jack Pope" permalink="jack-pope" photo="/images/team/jack-pope.jpg" github="jackpope" personal="jackpope.me" title="Engineer at Meta">
Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX.
</TeamMember>

<TeamMember name="Jason Bonta" permalink="jason-bonta" photo="/images/team/jasonbonta.jpg" threads="someextent" title="Engineering Manager at Meta">
Jason 喜欢将大批的亚马逊包裹送到办公室,这样他就能用它们搭建堡垒。虽然他有时会真的用这些包裹筑成墙,将自己和团队隔离,甚至还不理解 for-of 循环是怎样工作的,但我们仍然非常欣赏他在工作中表现出的独特品质。
</TeamMember>
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/manipulating-the-dom-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -495,7 +495,11 @@ export default function Form() {

React 在提交阶段设置 `ref.current`。在更新 DOM 之前,React 将受影响的 `ref.current` 值设置为 `null`。更新 DOM 后,React 立即将它们设置到相应的 DOM 节点。

<<<<<<< HEAD
**通常,你将从事件处理器访问 refs。** 如果你想使用 ref 执行某些操作,但没有特定的事件可以执行此操作,你可能需要一个 effect。我们将在下一页讨论 effect。
=======
**Usually, you will access refs from event handlers.** If you want to do something with a ref, but there is no particular event to do it in, you might need an Effect. We will discuss Effects on the next pages.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
<DeepDive>

Expand Down
7 changes: 7 additions & 0 deletions src/content/reference/react-dom/flushSync.md
Original file line number Diff line number Diff line change
Expand Up @@ -51,10 +51,17 @@ flushSync(() => {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* `flushSync` 可能会严重影响性能,因此请谨慎使用。
* `flushSync` 可能会强制挂起的 Suspense 边界显示其 `fallback` 状态。
* `flushSync` 可能会在返回之前运行挂起的 Effect,并同步应用其包含的任何更新。
* `flushSync` 可能会在必要时刷新回调函数之外的更新,以便刷新回调函数内部的更新。例如,如果有来自点击事件的挂起更新,React 可能会在刷新回调函数内部的更新之前刷新这些更新。
=======
* `flushSync` can significantly hurt performance. Use sparingly.
* `flushSync` may force pending Suspense boundaries to show their `fallback` state.
* `flushSync` may run pending Effects and synchronously apply any updates they contain before returning.
* `flushSync` may flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/react-dom/hydrate.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,11 @@ export default function App() {
### 处理不同的客户端和服务器内容 {/*handling-different-client-and-server-content*/}
<<<<<<< HEAD
如果需要在服务器和客户端上故意渲染不同的内容,可以进行双重渲染。在客户端上渲染不同内容的组件可以读取像 `isClient` 这样的 [state 变量](/reference/react/useState),你可以在 [effect](/reference/react/useEffect) 中将其设置为 `true`
=======
If you intentionally need to render something different on the server and the client, you can do a two-pass rendering. Components that render something different on the client can read a [state variable](/reference/react/useState) like `isClient`, which you can set to `true` in an [Effect](/reference/react/useEffect):
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
<Sandpack>
Expand Down
8 changes: 8 additions & 0 deletions src/content/reference/react-dom/preconnect.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,11 +54,19 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* 对同一服务器进行多次调用 `preconnect` 具有与单次调用相同的效果。
* 在浏览器中,可以在任何情况下调用 `preconnect`:例如渲染组件时、Effect 中以及事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件或在从渲染组件中发起的异步上下文中调用 `preconnect` 时才会生效。任何其他调用都将被忽略。
* 如果知道即将需要的具体资源,可以调用 [其他函数](/reference/react-dom/#resource-preloading-apis),这些函数将立即开始加载资源。
* 预连接到托管网页本身的相同服务器没有好处,因为在给出提示时它已经连接。
=======
* Multiple calls to `preconnect` with the same server have the same effect as a single call.
* In the browser, you can call `preconnect` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preconnect` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
* If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
* There is no benefit to preconnecting to the same server the webpage itself is hosted from because it's already been connected to by the time the hint would be given.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
9 changes: 9 additions & 0 deletions src/content/reference/react-dom/prefetchDNS.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,21 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* 对同一服务器进行多次调用 `prefetchDNS` 具有与单次调用相同的效果。
* 在浏览器中,可以在任何情况下调用 `prefetchDNS`:例如渲染组件时、Effect 中以及事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件或在从渲染组件中发起的异步上下文中调用 `prefetchDNS` 时才会生效。任何其他调用都将被忽略。
* 如果知道即将需要的具体资源,可以调用 [其他函数](/reference/react-dom/#resource-preloading-apis),这些函数将立即开始加载资源。
* 对于托管网页本身的相同服务器,预获取其 IP 地址没有好处,因为在给出提示时它已经被查找过了。
*[`preconnect`](/reference/react-dom/preconnect) 相比,如果正在尝试与大量域名进行推测性连接,`prefetchDNS` 可能更有效,因为预连接的开销可能会超过其带来的好处。
=======
* Multiple calls to `prefetchDNS` with the same server have the same effect as a single call.
* In the browser, you can call `prefetchDNS` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `prefetchDNS` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
* If you know the specific resources you'll need, you can call [other functions](/reference/react-dom/#resource-preloading-apis) instead that will start loading the resources right away.
* There is no benefit to prefetching the same server the webpage itself is hosted from because it's already been looked up by the time the hint would be given.
* Compared with [`preconnect`](/reference/react-dom/preconnect), `prefetchDNS` may be better if you are speculatively connecting to a large number of domains, in which case the overhead of preconnections might outweigh the benefit.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react-dom/preinit.md
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,15 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* 对于具有相同 `href` 的多个 `preinit` 调用具有与单个调用相同的效果。
* 在浏览器中,可以在任何情况下调用 `preinit`:例如渲染组件时、Effect 中以及事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件时调用 `preinit` 或在源自渲染组件的异步上下文中调用时,`preinit` 才会生效。其他任何调用都将被忽略。
=======
* Multiple calls to `preinit` with the same `href` have the same effect as a single call.
* In the browser, you can call `preinit` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preinit` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react-dom/preinitModule.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,9 +64,15 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* 对于具有相同 `href` 的多个 `preinitModule` 调用具有与单个调用相同的效果。
* 在浏览器中,可以在任何情况下调用 `preinitModule`:例如渲染组件时、Effect 中以及事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件时调用 `preinitModule` 或在源自渲染组件的异步上下文中调用时,`preinitModule` 才会生效。其他任何调用都将被忽略。
=======
* Multiple calls to `preinitModule` with the same `href` have the same effect as a single call.
* In the browser, you can call `preinitModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preinitModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
8 changes: 8 additions & 0 deletions src/content/reference/react-dom/preload.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,19 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
*`preload` 的多个等效调用与单个调用具有相同的效果。根据以下规则,对 `preload` 的调用被视为等效:
* 如果两个调用具有相同的 `href`,则它们是等效的,除非:
* 如果 `as` 设置为 `image`,并且两个调用具有相同的 `href``imageSrcSet``imageSizes`,则它们是等效的。
* 在浏览器中,可以在任何情况下调用 `preload`:例如渲染组件时、Effect 中以及事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件时调用 `preload` 或在源自渲染组件的异步上下文中调用时,`preload` 才会生效。其他任何调用都将被忽略。
=======
* Multiple equivalent calls to `preload` have the same effect as a single call. Calls to `preload` are considered equivalent according to the following rules:
* Two calls are equivalent if they have the same `href`, except:
* If `as` is set to `image`, two calls are equivalent if they have the same `href`, `imageSrcSet`, and `imageSizes`.
* In the browser, you can call `preload` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preload` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
6 changes: 6 additions & 0 deletions src/content/reference/react-dom/preloadModule.md
Original file line number Diff line number Diff line change
Expand Up @@ -65,9 +65,15 @@ function AppRoot() {

#### 注意 {/*caveats*/}

<<<<<<< HEAD
* 对于相同的 `href`,多次调用 `preloadModule` 具有与单次调用相同的效果。
* 在浏览器中,您可以在任何情况下调用 `preloadModule`:在渲染组件时、在 Effect 中以及在事件处理程序中等等。
* 在服务器端渲染或渲染服务器组件时,只有在渲染组件或在从渲染组件中发起的异步上下文中调用 `preloadModule` 时才会生效。任何其他调用都将被忽略。
=======
* Multiple calls to `preloadModule` with the same `href` have the same effect as a single call.
* In the browser, you can call `preloadModule` in any situation: while rendering a component, in an Effect, in an event handler, and so on.
* In server-side rendering or when rendering Server Components, `preloadModule` only has an effect if you call it while rendering a component or in an async context originating from rendering a component. Any other calls will be ignored.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
9 changes: 9 additions & 0 deletions src/content/reference/react/Profiler.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,21 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime

#### 参数 {/*onrender-parameters*/}

<<<<<<< HEAD
* `id`:字符串,为 `<Profiler>` 树的 `id` 属性,用于标识刚刚提交的部分。如果使用多个 profiler,可以通过此属性识别提交的是树中的哪一部分。
* `phase`:为 `"mount"``"update"``"nested-update"` 中之一。这可以让你知道组件树是首次挂载还是由于 props、state 或 hook 的更改而重新渲染。
* `actualDuration`:在此次更新中,渲染 `<Profiler>` 组件树的毫秒数。这可以显示子树在使用记忆化(例如 [`memo`](/reference/react/memo)[`useMemo`](/reference/react/useMemo))后的效果如何。理想情况下,此值在挂载后应显著减少,因为许多后代组件只会在特定的 props 变化时重新渲染。
* `baseDuration`:估算在没有任何优化的情况下重新渲染整棵 `<Profiler>` 子树所需的毫秒数。它通过累加树中每个组件的最近一次渲染持续时间来计算。此值估计了渲染的最差情况成本(例如初始挂载或没有使用记忆化的树)。将其与 `actualDuration` 进行比较,以确定记忆化是否起作用。
* `startTime`:当 React 开始渲染此次更新时的时间戳。
* `commitTime`:当 React 提交此次更新时的时间戳。此值在提交的所有 profiler 中共享,如果需要,可以对它们进行分组。
=======
* `id`: The string `id` prop of the `<Profiler>` tree that has just committed. This lets you identify which part of the tree was committed if you are using multiple profilers.
* `phase`: `"mount"`, `"update"` or `"nested-update"`. This lets you know whether the tree has just been mounted for the first time or re-rendered due to a change in props, state, or Hooks.
* `actualDuration`: The number of milliseconds spent rendering the `<Profiler>` and its descendants for the current update. This indicates how well the subtree makes use of memoization (e.g. [`memo`](/reference/react/memo) and [`useMemo`](/reference/react/useMemo)). Ideally this value should decrease significantly after the initial mount as many of the descendants will only need to re-render if their specific props change.
* `baseDuration`: The number of milliseconds estimating how much time it would take to re-render the entire `<Profiler>` subtree without any optimizations. It is calculated by summing up the most recent render durations of each component in the tree. This value estimates a worst-case cost of rendering (e.g. the initial mount or a tree with no memoization). Compare `actualDuration` against it to see if memoization is working.
* `startTime`: A numeric timestamp for when React began rendering the current update.
* `commitTime`: A numeric timestamp for when React committed the current update. This value is shared between all profilers in a commit, enabling them to be grouped if desirable.
>>>>>>> 9b4de7ceb504619b78d6043d0f90a5e85c22544c
---

Expand Down
Loading

0 comments on commit 64d3f07

Please sign in to comment.