Skip to content

Commit c28f125

Browse files
authored
fix conflict
1 parent 68fbf29 commit c28f125

File tree

3 files changed

+4
-23
lines changed

3 files changed

+4
-23
lines changed

src/content/learn/you-might-not-need-an-effect.md

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -757,11 +757,7 @@ function SearchResults({ query }) {
757757
758758
处理竞态条件并不是实现数据获取的唯一难点。你可能还需要考虑缓存响应结果(使用户点击后退按钮时可以立即看到先前的屏幕内容),如何在服务端获取数据(使服务端初始渲染的 HTML 中包含获取到的内容而不是加载动画),以及如何避免网络瀑布(使子组件不必等待每个父组件的数据获取完毕后才开始获取数据)。
759759
760-
<<<<<<< HEAD
761-
**这些问题适用于任何 UI 库,而不仅仅是 React。解决这些问题并不容易,这也是现代 [框架](/learn/start-a-new-react-project#full-stack-frameworks) 提供了比在 Effect 中获取数据更有效的内置数据获取机制的原因。**
762-
=======
763-
**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/creating-a-react-app#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
764-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
760+
**这些问题适用于任何 UI 库,而不仅仅是 React。解决这些问题并不容易,这也是现代 [框架](/learn/creating-a-react-app#full-stack-frameworks) 提供了比在 Effect 中获取数据更有效的内置数据获取机制的原因。**
765761
766762
如果你不使用框架(也不想开发自己的框架),但希望使从 Effect 中获取数据更符合人类直觉,请考虑像这个例子一样,将获取逻辑提取到一个自定义 Hook 中:
767763

src/content/reference/react/useEffect.md

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1049,13 +1049,8 @@ export async function fetchBio(person) {
10491049
10501050
这些缺点并不仅仅体现在 React 上,它可能出现在所有挂载时请求数据的地方。与路由一样,要做好数据请求并非易事,因此我们推荐以下方法:
10511051
1052-
<<<<<<< HEAD
1053-
- **如果正在使用 [框架](/learn/start-a-new-react-project#full-stack-frameworks),那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制,不会受到上述问题的影响。
1052+
- **如果正在使用 [框架](/learn/creating-a-react-app#full-stack-frameworks),那么请使用其内置的数据获取机制**。现代 React 框架已经集成了高效的数据获取机制,不会受到上述问题的影响。
10541053
- **否则,请考虑使用或构建客户端缓存**。流行的开源解决方案包括 [TanStack Query](https://tanstack.com/query/latest/)、[useSWR](https://swr.vercel.app/) 和 [React Router v6.4+](https://beta.reactrouter.com/en/main/start/overview)。你也可以构建自己的解决方案,在这种情况下,你将在底层使用 Effect,但还需添加逻辑以避免重复请求、缓存响应并避免网络瀑布效应(通过预加载数据或将数据需求提升到路由级别)。
1055-
=======
1056-
- **If you use a [framework](/learn/creating-a-react-app#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
1057-
- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [TanStack Query](https://tanstack.com/query/latest/), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood but also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
1058-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
10591054
10601055
如果这两种方法都不适合你,可以继续直接在 Effect 中请求数据。
10611056
@@ -1733,11 +1728,7 @@ function Page({ url, shoppingCart }) {
17331728
17341729
### 在服务器和客户端上显示不同的内容 {/*displaying-different-content-on-the-server-and-the-client*/}
17351730
1736-
<<<<<<< HEAD
1737-
如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/start-a-new-react-project#full-stack-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同。
1738-
=======
1739-
If your app uses server rendering (either [directly](/reference/react-dom/server) or via a [framework](/learn/creating-a-react-app#full-stack-frameworks)), your component will render in two different environments. On the server, it will render to produce the initial HTML. On the client, React will run the rendering code again so that it can attach your event handlers to that HTML. This is why, for [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) to work, your initial render output must be identical on the client and the server.
1740-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
1731+
如果你的应用程序使用服务端([直接](/reference/react-dom/server) 或通过 [框架](/learn/creating-a-react-app#full-stack-frameworks))渲染,你的组件将会在两个不同的环境中渲染。在服务器上,它将渲染生成初始 HTML。在客户端,React 将再次运行渲染代码,以便将事件处理附加到该 HTML 上。这就是为什么要让 [hydration](/reference/react-dom/client/hydrateRoot#hydrating-server-rendered-html) 发挥作用,你的初始渲染输出必须在客户端和服务器上完全相同。
17411732
17421733
在极少数情况下,你可能需要在客户端上显示不同的内容。例如,如果你的应用从 [`localStorage`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage) 中读取某些数据,服务器上肯定不可能做到这一点。以下是这如何实现的:
17431734

src/content/reference/react/useTransition.md

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1246,15 +1246,9 @@ function Router() {
12461246
12471247
这么做有三个好处:
12481248
1249-
<<<<<<< HEAD
1250-
- [转换效果是可中断的](#marking-a-state-update-as-a-non-blocking-transition),这样用户可以在等待重新渲染完成之前点击其他地方。
1249+
- [转换效果是可中断的](#perform-non-blocking-updates-with-actions),这样用户可以在等待重新渲染完成之前点击其他地方。
12511250
- [转换效果可以防止不必要的加载指示符](#preventing-unwanted-loading-indicators),这样用户就可以避免在导航时产生不协调的跳转。
12521251
- [Transition 等待所有挂起的 action](#perform-non-blocking-updates-with-actions),它允许用户在副作用完成之后再显示新页面。
1253-
=======
1254-
- [Transitions are interruptible,](#perform-non-blocking-updates-with-actions) which lets the user click away without waiting for the re-render to complete.
1255-
- [Transitions prevent unwanted loading indicators,](#preventing-unwanted-loading-indicators) which lets the user avoid jarring jumps on navigation.
1256-
- [Transitions wait for all pending actions](#perform-non-blocking-updates-with-actions) which lets the user wait for side effects to complete before the new page is shown.
1257-
>>>>>>> 2534424ec6c433cc2c811d5a0bd5a65b75efa5f0
12581252
12591253
下面是一个简单的使用转换效果进行页面导航的路由器示例:
12601254

0 commit comments

Comments
 (0)