fix conflict

Author: loveloki

src/content/blog/2025/04/23/react-labs-view-transitions-activity-and-more.md

@@ -11465,19 +11465,15 @@ root.render(
 
 ## Activity {/*activity*/}
 
-<<<<<<< HEAD
-在[过去](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)的[更新](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)中，我们分享了我们正在研究一个 API，允许组件在视觉上被隐藏并降低优先级，相比卸载或使用 CSS 隐藏，这种方式能以更低的性能成本保留 UI 状态。
-=======
 <Note>
 
-**`<Activity />` is now available in React’s Canary channel.**
+**`<Activity />` 现在可以在 React Canary 版本使用。**
 
-[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
+[了解更多关于 React 版本发布的内容。](/community/versioning-policy#all-release-channels)
 
 </Note>
 
-In [past](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen) [updates](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity), we shared that we were researching an API to allow components to be visually hidden and deprioritized, preserving UI state with reduced performance costs relative to unmounting or hiding with CSS.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+在[过去](/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022#offscreen)的[更新](/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#offscreen-renamed-to-activity)中，我们分享了我们正在研究一个 API，允许组件在视觉上被隐藏并降低优先级，相比卸载或使用 CSS 隐藏，这种方式能以更低的性能成本保留 UI 状态。
 
 现在我们准备分享这个 API 及其工作原理，这样你就可以开始在实验性 React 版本中测试它了。
 

src/content/learn/build-a-react-app-from-scratch.md

@@ -122,11 +122,7 @@ React 生态系统中包含许多用于解决这些问题的工具。我们列
 
 ### 提高应用程序性能 {/*improving-application-performance*/}
 
-<<<<<<< HEAD
 由于你选择的构建工具仅支持单页应用程序（SPA），你需要实现其他 [渲染模式](https://www.patterns.dev/vanilla/rendering-patterns) 如服务器端渲染（SSR）、静态站点生成（SSG）和/或 React 服务器组件（RSC）。即使你一开始不需要这些功能，将来也可能有一些路由会从 SSR、SSG 或 RSC 中受益。
-=======
-Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * **单页面应用程序 (SPA)** 加载单个 HTML 页面，并在用户与应用程序交互时动态更新页面。SPA 更容易入门，但初始加载时间可能较慢。SPA 是大多数构建工具的默认架构。
 

src/content/learn/manipulating-the-dom-with-refs.md

@@ -213,11 +213,7 @@ li {
 
 一种可能的解决方案是用一个 ref 引用其父元素，然后用 DOM 操作方法如 [`querySelectorAll`](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelectorAll) 来寻找它的子节点。然而，这种方法很脆弱，如果 DOM 结构发生变化，可能会失效或报错。
 
-<<<<<<< HEAD
 另一种解决方案是**将函数传递给 `ref` 属性**。这称为 [`ref` 回调](/reference/react-dom/components/common#ref-callback)。当需要设置 ref 时，React 将传入 DOM 节点来调用你的 ref 回调，并在需要清除它时传入 `null` 。这使你可以维护自己的数组或 [Map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Map)，并通过其索引或某种类型的 ID 访问任何 ref。
-=======
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 此示例展示了如何使用此方法滚动到长列表中的任意节点： 
 

src/content/learn/react-compiler/installation.md

@@ -176,20 +176,7 @@ React Compiler 包含一条 ESLint 规则，可帮助识别无法优化的代码
 npm install -D eslint-plugin-react-hooks@rc
 </TerminalBlock>
 
-<<<<<<< HEAD
-然后在你的 ESLint 配置中启用编译器规则：
-
-```js {3}
-// .eslintrc.js
-module.exports = {
-  rules: {
-    'react-hooks/react-compiler': 'error',
-  },
-};
-```
-=======
-If you haven't already configured eslint-plugin-react-hooks, follow the [installation instructions in the readme](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation). The compiler rule is enabled by default in the latest RC, so no additional configuration is needed.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+如果你尚未配置好 eslint-plugin-react-hooks，参考 [readme 的安装说明来进行配置](https://github.com/facebook/react/blob/main/packages/eslint-plugin-react-hooks/README.md#installation)。最新的 RC 版本中默认启用了编译器规则，因此不需要其他配置。
 
 ESLint 规则将会：
 - 识别对 [React 规则](/reference/rules) 的违反情况

src/content/learn/react-compiler/introduction.md

@@ -50,10 +50,6 @@ const ExpensiveComponent = memo(function ExpensiveComponent({ data, onClick }) {
 });
 ```
 
-<<<<<<< HEAD
-### 在使用 React 编译器之后 {/*after-react-compiler*/}
-=======
-
 <Note>
 
 This manual memoization has a subtle bug that breaks memoization:
@@ -68,8 +64,7 @@ React Compiler is able to optimize this correctly with or without the arrow func
 
 </Note>
 
-### After React Compiler {/*after-react-compiler*/}
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+### 在使用 React 编译器之后 {/*after-react-compiler*/}
 
 使用 React 编译器，你可以编写相同的代码而无需手动进行记忆化：
 
@@ -93,11 +88,7 @@ function ExpensiveComponent({ data, onClick }) {
 
 __[在 React 编译器游乐场中查看此示例](https://playground.react.dev/#N4Igzg9grgTgxgUxALhAMygOzgFwJYSYAEAogB4AOCmYeAbggMIQC2Fh1OAFMEQCYBDHAIA0RQowA2eOAGsiAXwCURYAB1iROITA4iFGBERgwCPgBEhAogF4iCStVoMACoeO1MAcy6DhSgG4NDSItHT0ACwFMPkkmaTlbIi48HAQWFRsAPlUQ0PFMKRlZFLSWADo8PkC8hSDMPJgEHFhiLjzQgB4+eiyO-OADIwQTM0thcpYBClL02xz2zXz8zoBJMqJZBABPG2BU9Mq+BQKiuT2uTJyomLizkoOMk4B6PqX8pSUFfs7nnro3qEapgFCAFEA)__
 
-<<<<<<< HEAD
 React 编译器会自动应用等效的优化，确保你的应用只在必要时重新渲染。
-=======
-React Compiler automatically applies the optimal memoization, ensuring your app only re-renders when necessary.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 <DeepDive>
 #### React 编译器添加了哪种类型的记忆化？ {/*what-kind-of-memoization-does-react-compiler-add*/}
@@ -177,11 +168,7 @@ Next.js 用户可以通过使用 [v15.3.1](https://github.com/vercel/next.js/rel
 
 ## 关于 useMemo、useCallback 和 React.memo 我应该怎么做？ {/*what-should-i-do-about-usememo-usecallback-and-reactmemo*/}
 
-<<<<<<< HEAD
-如果你正在使用 React 编译器，可以移除 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo)。React 编译器能够比使用这些 Hook 更精确和细致地添加自动记忆化功能。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。
-=======
-React Compiler adds automatic memoization more precisely and granularly than is possible with [`useMemo`](/reference/react/useMemo), [`useCallback`](/reference/react/useCallback), and [`React.memo`](/reference/react/memo). If you choose to keep manual memoization, React Compiler will analyze them and determine if your manual memoization matches its automatically inferred memoization. If there isn't a match, the compiler will choose to bail out of optimizing that component.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
+React 编译器能够比手动使用 [`useMemo`](/reference/react/useMemo)、[`useCallback`](/reference/react/useCallback) 和 [`React.memo`](/reference/react/memo) 更精确和细致地添加自动记忆化。如果你选择保留手动记忆化，React 编译器会分析它们，并判断你的手动记忆化是否与其自动推断出的记忆化一致。如果不一致，编译器将选择放弃优化该组件。
 
 这样做是出于谨慎考虑，因为手动记忆化常见的反模式是为了保证程序的正确性。这意味着你的应用依赖于对特定值进行记忆化才能正常运行。例如，为了防止无限循环，你可能会记忆某些值来阻止 `useEffect` 被触发。这违反了 React 的规则，但因为编译器自动移除手动记忆化可能会有潜在危险，所以会直接放弃优化。你应该手动移除自己的手动记忆化代码，并验证应用是否仍能按预期运行。
 

src/content/learn/reusing-logic-with-custom-hooks.md

@@ -1419,12 +1419,6 @@ function SaveButton() {
 
 #### React 会为数据获取提供内置解决方案么？ {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
 
-<<<<<<< HEAD
-我们仍然在规划细节，但是期望未来可以像这样写数据获取：
-
-```js {1,4,6}
-import { use } from 'react'; // 还不可用！
-=======
 Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`:
 
 ```js {1,4,11}
@@ -1444,11 +1438,10 @@ export function MessageContainer({ messagePromise }) {
 }
 ```
 
-We're still working out the details, but we expect that in the future, you'll write data fetching like this:
+我们仍然在规划细节，但是期望未来可以像这样写数据获取：
 
 ```js {1,4,6}
 import { use } from 'react';
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 function ShippingForm({ country }) {
   const cities = use(fetch(`/api/cities?country=${country}`));

src/content/learn/synchronizing-with-effects.md

@@ -617,11 +617,7 @@ React 有意在开发环境下重新挂载你的组件，来找到类似上例
 
 它虽然使你在开发环境下只看到一次 `“✅ 正在连接...”`，但并没有修复这个 bug。
 
-<<<<<<< HEAD
 当用户离开时，连接没有被关闭，当用户返回时，又会创建一个新的连接。随着用户浏览应用，连接会不断累积，就像“修复”之前一样。
-=======
-When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix".
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 要修复这个 bug，仅仅让 Effect 只运行一次是不够的。想要 Effect 在重新挂载后正常运行，就得按照之前的方法清除连接。
 
@@ -1008,13 +1004,8 @@ import { useEffect, useRef } from 'react';
 export default function MyInput({ value, onChange }) {
   const ref = useRef(null);
 
-<<<<<<< HEAD
   // TODO：下面的这种做法不会生效，请修复。
   // ref.current.focus()    
-=======
-  // TODO: This doesn't quite work. Fix it.
-  // ref.current.focus()
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
   return (
     <input

src/content/learn/tutorial-tic-tac-toe.md

@@ -283,15 +283,9 @@ body {
 
 ![CodeSandbox 的初始代码](../images/tutorial/react-starter-code-codesandbox.png)
 
-<<<<<<< HEAD
-1. _Files_ 部分列出了一些文件：`App.js`、`index.js`、`styles.css` 和 `public` 文件夹。
+1. _Files_ 部分列出了一些文件：`src` 文件夹中的 `App.js`、`index.js`、`styles.css` 文件和 `public` 文件夹。
 2. _code editor_ 部分可以看到你所选中文件的源码。
 3. _browser_ 部分可以预览代码的实时结果。
-=======
-1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` in `src` folder and a folder called `public`
-1. The _code editor_ where you'll see the source code of your selected file
-1. The _browser_ section where you'll see how the code you've written will be displayed
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 `App.js` 文件里面的内容应该是这样的：
 

src/content/learn/typescript.md

@@ -37,15 +37,9 @@ npm install --save-dev @types/react @types/react-dom
 
 然后在 `tsconfig.json` 中设置以下编译器选项：
 
-<<<<<<< HEAD
 1. 必须在 [`lib`](https://www.typescriptlang.org/tsconfig/#lib) 中包含 `dom`（注意：如果没有指定 `lib` 选项，默认情况下会包含 `dom`）。
-1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。
+2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) 必须设置为一个有效的选项。对于大多数应用程序，`preserve` 应该足够了。
 如果你正在发布一个库，请查阅 [`jsx` 文档](https://www.typescriptlang.org/tsconfig/#jsx) 以选择合适的值。
-=======
-1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
-2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
-  If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 ## 在 React 组件中使用 TypeScript {/*typescript-with-react-components*/}
 

src/content/reference/react-dom/components/style.md

@@ -49,11 +49,7 @@ React 可以将 `<style>` 组件移动到文档的 `<head>` 中，去重相同
 
 请提供 `href` 和 `precedence` 属性以选择此行为。如果样式表具有相同的 `href`，React 将对样式去重。优先级属性告诉 React 在文档的 `<head>` 中排列 `<style>` DOM 节点的位置，从而确定哪个样式表可以覆盖另一个。
 
-<<<<<<< HEAD
 这种特殊处理带来两个注意事项：
-=======
-This special treatment comes with three caveats:
->>>>>>> 366b5fbdadefecbbf9f6ef36c0342c083248c691
 
 * 在样式被渲染后，React 将忽略属性的更改（React 在开发环境中会对这种情况发出警告）。
 * 当设置了 `precedence` 属性的时候，React 会丢弃除了 `href` 和 `precedence` 的之外所有无关属性。