fix conflict

src/content/blog/2024/12/05/react-19.md

@@ -17,11 +17,7 @@ description: React 19 版现在可以在 npm 上使用了! 在这篇文章中，
 - **预热 suspend 树**：阅读 [改善 Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense) 来了解更多。
 - **React DOM 静态 API**：阅读 [新的 React DOM 静态 API](#new-react-dom-static-apis) 来了解更多。
 
-<<<<<<< HEAD
 __本文的日期已更新，以反映稳定版的发布日期。__
-=======
-_The date for this post has been updated to reflect the stable release date._
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 </Note>
 
@@ -366,11 +362,7 @@ React 19 包含了所有从 Canary 渠道引入的 React 服务器组件功能
 
 #### 如何构建对服务器组件的支持? {/*how-do-i-build-support-for-server-components*/}
 
-<<<<<<< HEAD
 虽然 React 19 中的 React 服务器组件是稳定的，并且在主版本之间不会发生破坏，但用于实现 React 服务器组件打包器或框架的底层 API 不遵循 semver，并可能在 React 19.x 的小版本之间发生破坏。
-=======
-While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. 
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 为了支持 React 服务器组件作为打包器或框架，我们建议固定到特定的 React 版本，或者使用 Canary 发行版。我们将继续与打包器和框架合作，以稳定用于实现 React 服务器组件的 API。
 
@@ -815,8 +807,4 @@ React 19 添加了对自定义元素的全面支持，并通过了 [Custom Eleme
 
 请查看 [React 19 升级指南](/blog/2024/04/25/react-19-upgrade-guide) 以获取逐步指导和完整的破坏性和显著变化列表。
 
-<<<<<<< HEAD
 __注意：这篇文章最初发布于 2024 年 4 月 25 日，并已将内容更新至 2024 年 12 月 5 日发布的稳定版本。__
-=======
-_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682

src/content/learn/index.md

@@ -10,11 +10,7 @@ translators:
 
 <Intro>
 
-<<<<<<< HEAD
 欢迎来到 React 文档！本章节将介绍你每天都会使用的 80% 的 React 概念。
-=======
-Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 </Intro>
 

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

@@ -345,16 +345,11 @@ li {
 
 ## 访问另一个组件的 DOM 节点 {/*accessing-another-components-dom-nodes*/}
 
-<<<<<<< HEAD
-当你将 ref 放在像 `<input />` 这样输出浏览器元素的内置组件上时，React 会将该 ref 的 `current` 属性设置为相应的 DOM 节点（例如浏览器中实际的 `<input />` ）。
-
-但是，如果你尝试将 ref 放在 **你自己的** 组件上，例如 `<MyInput />`，默认情况下你会得到 `null`。这个示例演示了这种情况。请注意单击按钮 **并不会** 聚焦输入框：
-=======
 <Pitfall>
-Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+Ref 是一个脱围机制。手动操作 __其它__ 组件的 DOM 节点可能会让代码变得脆弱。
 </Pitfall>
 
-You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+你可以 [像其它 prop 一样](/learn/passing-props-to-a-component) 将 ref 从父组件传递给子组件。
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -369,10 +364,9 @@ function MyForm() {
 }
 ```
 
-In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+在上面这个例子中，父组件创建了一个名为 `MyForm` 的 ref，并且将它传递给了 `MyInput` 子组件。`MyInput` 将这个 ref 传递给 `<input>`。因为 `<input>` 是一个 [内置组件](/reference/react-dom/components/common)，React 会将 ref 的 `.current` 属性设置为这个 `<input>` DOM 元素。
 
-The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+在 `MyForm` 中创建的 `inputRef` 现在指向 `MyInput` 返回的 `<input>` DOM 元素。在 `MyForm` 中创建的点击处理程序可以访问 `inputRef` 并且调用 `focus()` 来将焦点设置在 `<input>` 上。
 
 <Sandpack>
 
@@ -403,75 +397,11 @@ export default function MyForm() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-为了帮助你注意到这个问题，React 还会向控制台打印一条错误消息：
-
-<ConsoleBlock level="error">
-
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
-
-</ConsoleBlock>
-
-发生这种情况是因为默认情况下，React 不允许组件访问其他组件的 DOM 节点。甚至自己的子组件也不行！这是故意的。Refs 是一种脱围机制，应该谨慎使用。手动操作 **另一个** 组件的 DOM 节点会使你的代码更加脆弱。
-
-相反，**想要** 暴露其 DOM 节点的组件必须**选择**该行为。一个组件可以指定将它的 ref “转发”给一个子组件。下面是 `MyInput` 如何使用 `forwardRef` API：
-
-```js
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-```
-
-它是这样工作的:
-
-1. `<MyInput ref={inputRef} />` 告诉 React 将对应的 DOM 节点放入 `inputRef.current` 中。但是，这取决于 `MyInput` 组件是否允许这种行为， 默认情况下是不允许的。
-2. `MyInput` 组件是使用 `forwardRef` 声明的。 **这让从上面接收的 `inputRef` 作为第二个参数 `ref` 传入组件**，第一个参数是 `props` 。
-3. `MyInput` 组件将自己接收到的 `ref` 传递给它内部的 `<input>`。
-
-现在，单击按钮聚焦输入框起作用了：
-
-<Sandpack>
-
-```js
-import { forwardRef, useRef } from 'react';
-
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-
-export default function Form() {
-  const inputRef = useRef(null);
-
-  function handleClick() {
-    inputRef.current.focus();
-  }
-
-  return (
-    <>
-      <MyInput ref={inputRef} />
-      <button onClick={handleClick}>
-        聚焦输入框
-      </button>
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-在设计系统中，将低级组件（如按钮、输入框等）的 ref 转发到它们的 DOM 节点是一种常见模式。另一方面，像表单、列表或页面段落这样的高级组件通常不会暴露它们的 DOM 节点，以避免对 DOM 结构的意外依赖。
-
-=======
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 <DeepDive>
 
 #### 使用命令句柄暴露一部分 API {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-<<<<<<< HEAD
-在上面的例子中，`MyInput` 暴露了原始的 DOM 元素 input。这让父组件可以对其调用`focus()`。然而，这也让父组件能够做其他事情 —— 例如，改变其 CSS 样式。在一些不常见的情况下，你可能希望限制暴露的功能。你可以用 `useImperativeHandle` 做到这一点：
-=======
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+在上面的例子中，`MyInput` 暴露了原始的 DOM 元素 input。这让父组件可以对其调用`focus()`。然而，这也让父组件能够做其他事情 —— 例如，改变其 CSS 样式。在一些不常见的情况下，你可能希望限制暴露的功能。你可以用 [`useImperativeHandle`](/reference/react/useImperativeHandle) 来做到这一点：
 
 <Sandpack>
 
@@ -499,25 +429,15 @@ export default function Form() {
   return (
     <>
       <MyInput ref={inputRef} />
-<<<<<<< HEAD
-      <button onClick={handleClick}>
-        聚焦输入框
-      </button>
-=======
-      <button onClick={handleClick}>Focus the input</button>
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+      <button onClick={handleClick}>聚焦输入框</button>
     </>
   );
 }
 ```
 
 </Sandpack>
 
-<<<<<<< HEAD
-这里，`MyInput` 中的 `realInputRef` 保存了实际的 input DOM 节点。 但是，`useImperativeHandle` 指示 React 将你自己指定的对象作为父组件的 ref 值。 所以 `Form` 组件内的 `inputRef.current` 将只有 `focus` 方法。在这种情况下，ref “句柄”不是 DOM 节点，而是你在 `useImperativeHandle` 调用中创建的自定义对象。
-=======
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+这里，`MyInput` 中的 `realInputRef` 保存了实际的 input DOM 节点。 但是，[`useImperativeHandle`](/reference/react/useImperativeHandle) 指示 React 将你自己指定的对象作为父组件的 ref 值。 所以 `Form` 组件内的 `inputRef.current` 将只有 `focus` 方法。在这种情况下，ref “句柄”不是 DOM 节点，而是你在 [`useImperativeHandle`](/reference/react/useImperativeHandle) 调用中创建的自定义对象。
 
 </DeepDive>
 

src/content/learn/react-compiler.md

@@ -348,11 +348,7 @@ React Compiler 可以静态验证 React 的许多规则，并且在检测到错
 
 ### 我如何知道我的组件已被优化？ {/*how-do-i-know-my-components-have-been-optimized*/}
 
-<<<<<<< HEAD
-[React 开发工具](/learn/react-developer-tools)（v5.0 及以上版本）对 React Compiler 有内置支持，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
-=======
-[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+[React DevTools](/learn/react-developer-tools)（v5.0+）和 [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) 内置支持 React Compiler，并会在已被编译器优化的组件旁边显示“Memo ✨”徽章。
 
 ### 编译后某些内容无法正常工作 {/*something-is-not-working-after-compilation*/}
 如果你安装了 eslint-plugin-react-compiler ，编译器将在你的编辑器中显示任何违反 React 规则的情况。当它这样做时，意味着编译器跳过了对该组件或钩子的优化。这完全没问题，并且编译器可以恢复并继续优化你代码库中的其他组件。**你不必立即修复所有的违反 ESLint 规则的代码。** 你可以按照自己的节奏来处理它们，以增加被优化的组件和钩子的数量。

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

@@ -151,13 +151,9 @@ export default function SiteMapPage() {
 
 ### 控制样式表优先级 {/*controlling-stylesheet-precedence*/}
 
-<<<<<<< HEAD
-样式表可能会相互冲突，当发生冲突时，浏览器会选择文档中排在后面的样式表。React 允许使用 `precedence` 属性来控制样式表的顺序。在这个例子中，两个组件渲染样式表，具有较高优先级的组件在文档中排在较后位置，即使渲染它的组件出现在较早位置。
+样式表可能会相互冲突，当发生冲突时，浏览器会选择文档中排在后面的样式表。React 允许使用 `precedence` 属性来控制样式表的顺序。在这个例子中，三个组件渲染样式表，具有相同优先级的组件在 `<head>` 中将会被分组在一起。
 
 {/*FIXME: this doesn't appear to actually work -- I guess precedence isn't implemented yet?*/}
-=======
-Stylesheets can conflict with each other, and when they do, the browser goes with the one that comes later in the document. React lets you control the order of stylesheets with the `precedence` prop. In this example, three components render stylesheets, and the ones with the same precedence are grouped together in the `<head>`. 
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 <SandpackWithHTMLOutput>
 
@@ -191,13 +187,9 @@ function ThirdComponent() {
 
 </SandpackWithHTMLOutput>
 
-<<<<<<< HEAD
-### 去除样式表的重复渲染 {/*deduplicated-stylesheet-rendering*/}
-=======
 Note the `precedence` values themselves are arbitrary and their naming is up to you. React will infer that precedence values it discovers first are "lower" and precedence values it discovers later are "higher".
 
-### Deduplicated stylesheet rendering {/*deduplicated-stylesheet-rendering*/}
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+### 去除样式表的重复渲染 {/*deduplicated-stylesheet-rendering*/}
 
 如果在多个组件渲染相同的样式表，React 将只在文档头部放置单个 `<link>`。
 

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

@@ -62,15 +62,11 @@ React 可以将 `<style>` 组件移动到文档的 `<head>` 中，去重相同
 
 如果一个组件依赖于某些 CSS 样式以正确显示，可以在组件内部渲染一个内联样式表。
 
-<<<<<<< HEAD
-如果提供了 `href` 和 `precedence` 属性，组件将在样式表加载时挂起（即使是内联样式表，由于样式表引用的字体和图像，可能也会有加载时间）。`href` 属性应该唯一地标识样式表，因为 React 将对 `href` 的样式表进行去重。
-=======
-The `href` prop should uniquely identify the stylesheet, because React will de-duplicate stylesheets that have the same `href`.
-If you supply a `precedence` prop, React will reorder inline stylesheets based on the order these values appear in the component tree.
-
-Inline stylesheets will not trigger Suspense boundaries while they're loading.
-Even if they load async resources like fonts or images.
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
+`href` 属性应该在样式表中唯一，因为 React 会删除具有相同 `href` 属性的重复样式表。
+如果你提供了 `precedence` 属性，React 将根据这些值在组件树中出现的顺序对内联样式表重新排序。
+
+内联样式表在加载时不会触发 Suspense 边界。
+即使他们加载字体或图像等异步资源。
 
 <SandpackWithHTMLOutput>
 

src/content/reference/react/Suspense.md

@@ -207,15 +207,9 @@ async function getAlbums() {
 
 **只有启用了 Suspense 的数据源才会激活 Suspense 组件**，它们包括：
 
-<<<<<<< HEAD
-- 支持 Suspense 的框架如 [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) 和 [Next.js](https://nextjs.org/docs/getting-started/react-essentials)。
+- 支持 Suspense 的框架如 [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) 和 [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)。
 - 使用 [`lazy`](/reference/react/lazy) 懒加载组件代码。
 - 使用 [`use`](/reference/react/use) 读取缓存的 Promise 值。
-=======
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming#streaming-with-suspense)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a cached Promise with [`use`](/reference/react/use)
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 Suspense **无法** 检测在 Effect 或事件处理程序中获取数据的情况。
 

src/content/reference/react/createContext.md

@@ -84,11 +84,7 @@ function Button() {
 }
 ```
 
-<<<<<<< HEAD
 尽管这种老方法依然奏效，但 **新代码都应该通过 [`useContext()`](/reference/react/useContext) 来读取上下文**：
-=======
-Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:**
->>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682
 
 ```js
 function Button() {