Improve typo (#1611)

src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md

@@ -63,7 +63,7 @@ JavaScript 是一个因其松散规则和动态特性而闻名的具有挑战性
 
 库作者可以使用 `useTransition` 在自己的组件中实现自定义 `action={fn}` props。我们的目的是，当设计他们的组件 API 时，库应采用 Action 模式，为 React 开发人员提供一致的体验。例如，如果你的库提供了一个 `<Calendar onSelect={eventHandler}>` 组件，则还可以考虑暴露一个 `<Calendar selectAction={action}>` API。
 
-尽管我们最初专注于 Server Action 用于客户端/服务器数据传输，但我们对 React 的理念是在所有平台和环境中提供相同的编程模型。在可能的情况下，如果我们在客户端引入一个功能，我们也会使它在服务器上起作用，反之亦然。这一理念使我们能够创建一组 API，无论您的应用在何处运行，都可以工作，从而使以后更容易升级到不同的环境。
+尽管我们最初专注于 Server Action 用于客户端/服务器数据传输，但我们对 React 的理念是在所有平台和环境中提供相同的编程模型。在可能的情况下，如果我们在客户端引入一个功能，我们也会使它在服务器上起作用，反之亦然。这一理念使我们能够创建一组 API，无论你的应用在何处运行，都可以工作，从而使以后更容易升级到不同的环境。
 
 Action 现在在 Canary 通道中可用，并将在下一个 React 发布版本中发布。
 

src/content/blog/2024/04/25/react-19.md

@@ -152,7 +152,7 @@ const [error, submitAction, isPending] = useActionState(
   async (previousState, newName) => {
     const error = await updateName(newName);
     if (error) {
-      // 您可以返回操作的任何结果。
+      // 你可以返回操作的任何结果。
       // 这里，我们只返回错误。
       return error;
     }

src/content/blog/2024/10/21/react-compiler-beta-release.md

@@ -2,7 +2,7 @@
 title: "React Compiler 发布 Beta 版本"
 author: Lauren Tan
 date: 2024/10/21
-description: 在 React Conf 2024 上，我们宣布了 React Compiler 的实验性版本，这是一个构建时工具，可通过自动记忆来优化 React 应用程序。在这篇文章中，我们想分享开源的下一步发展，以及我们在编译器方面的进展。
+description: 在 React Conf 2024 上，我们宣布了 React Compiler 的实验性版本，这是一个构建时工具，可通过自动记忆化来优化 React 应用程序。在这篇文章中，我们想分享开源的下一步发展，以及我们在编译器方面的进展。
 
 ---
 
@@ -22,7 +22,7 @@ React 团队很高兴分享新的内容：
 
 ---
 
-在 [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) 上，我们宣布了 React Compiler 的实验版本，这是一个构建时工具，可通过自动记忆来优化 React 应用程序。[您可以在这里找到对 React Compiler 的介绍](/learn/react-compiler)。
+在 [React Conf 2024](/blog/2024/05/22/react-conf-2024-recap) 上，我们宣布了 React Compiler 的实验版本，这是一个构建时工具，可通过自动记忆化来优化 React 应用程序。[你可以在这里找到对 React Compiler 的介绍](/learn/react-compiler)。
 
 自第一个版本以来，我们修复了 React 社区报告的许多错误, 收到了多个高质量的错误修复和对编译器的贡献 [^1]，使编译器能够更好地适应多种 JavaScript 模式，并继续在 Meta 上更广泛地推出编译器。
 
@@ -78,23 +78,23 @@ React Compiler 还可以用来编译库。由于 React Compiler 需要在代码
 
 由于库的代码是预编译的，因此用户无需启用 Compiler 即可从编译器的自动记忆化中受益。如果库的 target 不是 React 19，请指定一个最小的 [`target` 并且将 `react-compiler-runtime` 添加为直接依赖](#using-react-compiler-with-react-17-or-18)。这个运行时包将根据应用程序的版本使用正确的 API 实现，并在必要时填充缺失的 API。
 
-[您可以在此处找到更多相关文档。](/learn/react-compiler#using-the-compiler-on-libraries)
+[你可以在此处找到更多相关文档。](/learn/react-compiler#using-the-compiler-on-libraries)
 
 ## 向所有人开放 React Compiler 工作组 {/*opening-up-react-compiler-working-group-to-everyone*/}
 
-我们之前在 React Conf 上宣布成立仅限邀请的 [React Compiler 工作组](https://github.com/reactwg/react-compiler) 以提供反馈、提出问题并就编译器的实验版本进行协作。
+我们之前在 React Conf 上宣布成立邀请制的 [React Compiler 工作组](https://github.com/reactwg/react-compiler) 以提供反馈、提出问题并就编译器的实验版本进行协作。
 
 从今天开始，随着 React Compiler 的测试版发布，我们向所有人开放工作组成员资格。React Compiler 工作组的目标是为生态系统做好准备，以便现有应用程序和库顺利、逐步采用 React Compiler。请继续在 [React 仓库中](https://github.com/facebook/react) 提交错误报告，但是在 [工作组论坛](https://github.com/reactwg/react-compiler/discussions) 中留下反馈、提出问题或分享想法。
 
 核心团队还将使用工作组论坛来分享我们的研究成果。随着稳定版本的临近，任何重要信息也将发布在该论坛上。
 
 ## React Compiler 在 Meta {/*react-compiler-at-meta*/}
 
-在 [React Conf](/blog/2024/05/22/react-conf-2024-recap) 上，我们分享了在 Quest Store 和 Instagram 上成功推出编译器的消息。从那时起，我们在包括 [Facebook](https://www.facebook.com) 和 [Threads](https://www.threads.net) 的几个 Meta 主要 Web 应用程序中部署了 React Compiler。这意味着如果你最近使用过这些应用程序中的任何一个，你的体验可能是由编译器提供支持的。我们能够在包含超过 100,000 个 React 组件的 monorepo 中将这些应用程序加载到编译器上，只需进行少量代码更改。
+在 [React Conf](/blog/2024/05/22/react-conf-2024-recap) 上，我们分享了在 Quest Store 和 Instagram 上成功推出编译器的消息。从那时起，我们在包括 [Facebook](https://www.facebook.com) 和 [Threads](https://www.threads.net) 的几个主要 Web 应用程序中部署了 React Compiler。这意味着如果你最近使用过这些应用程序中的任何一个，你的体验可能是由编译器提供支持的。我们能够在包含超过 100,000 个 React 组件的 monorepo 中将这些应用程序加载到编译器上，只需进行少量代码更改。
 
 我们发现所有这些应用程序的性能都有显着提高。随着编译器的推出，我们将继续看到 [之前在 ReactConf 上分享的成功经验](https://youtu.be/lyEKhv8-3n0?t=3223) 的结果。多年来 Meta 工程师和 React 专家对这些应用程序经过了大量手工调整和优化，因此即使是几个百分点的改进对我们来说也是一个巨大的胜利。
 
-我们还预计 React Compiler 会提高开发人员的生产力。为了衡量这一点，我们与 Meta[^2] 的数据科学合作伙伴合作，对手动记忆化对生产力的影响进行了彻底的统计分析。在 Meta 推出编译器之前，我们发现只有大约 8% 的 React PR 使用手动记忆化，并且这些 PR 的编写时间比其他 PR 增加了 31-46%[^3]。这证实了我们的直觉，即手动记忆化会带来认知开销，我们预计 React Compiler 将带来更高效的代码创作和审查。值得注意的是，React Compiler 还确保默认情况下记忆 **所有** 代码，而不仅仅是（在我们的例子中）开发人员明确记忆化的 8%。
+我们还预计 React Compiler 会提高开发人员的生产力。为了衡量这一点，我们与 Meta[^2] 的数据科学合作伙伴合作，将手动记忆化对生产力的影响进行了彻底的统计分析。在 Meta 推出编译器之前，我们发现只有大约 8% 的 React PR 使用手动记忆化，并且这些 PR 的编写时间比其他 PR 增加了 31-46%[^3]。这证实了我们的直觉，即手动记忆化会带来认知开销，我们预计 React Compiler 将带来更高效的代码创作和审查。值得注意的是，React Compiler 还确保默认情况下记忆 **所有** 代码，而不仅仅是（在我们的例子中）开发人员明确记忆化的 8%。
 
 ## 稳定版本路线图 {/*roadmap-to-stable*/}
 
@@ -105,13 +105,13 @@ React Compiler 还可以用来编译库。由于 React Compiler 需要在代码
 * ✅ 实验性（Experimental）：在 React Conf 2024 上发布，主要是为了获得早期采用者的反馈。 
 * ✅ 公开测试版（Public Beta）：现已推出，以获取更广泛社区的反馈。
 * 🚧 候选发布版（RC）： React Compiler 适用于大多数遵循规则的应用程序和库，不会引入任何问题。
-* 🚧 普遍适用（General Availability）：在社区的最终反馈期之后。
+* 🚧 普遍适用（General Availability）：在社区的最终反馈期结束后。
 
 这些版本还包括编译器的 ESLint 插件，该插件提供编译器静态分析的诊断信息。我们计划将现有的 eslint-plugin-react-hooks 插件与编译器的 ESLint 插件结合起来，因此最终只需要安装一个插件。
 
 稳定后，我们计划在少改动甚至不改动产品代码的情况下添加更多对编译器的优化和改进，这包括了对自动记忆化的持续优化和新的整体优化。升级到每个新版本的编译器都是为了更加简单明了，每次升级都将继续提高性能并更好地处理不同的 JavaScript 和 React 模式。
 
-在整个过程中，我们还计划为 React 制作一个 IDE 扩展原型。研究还处于早期阶段，因此我们希望能够在未来的 React Labs 博客文章中与您分享更多我们的发现。
+在整个过程中，我们还计划为 React 制作一个 IDE 扩展原型。研究还处于早期阶段，因此我们希望能够在未来的 React Labs 博客文章中与你分享更多我们的发现。
 
 ---
 

src/content/learn/choosing-the-state-structure.md

@@ -20,7 +20,7 @@ translators:
 
 ## 构建 state 的原则 {/*principles-for-structuring-state*/}
 
-当你编写一个存有 state 的组件时，你需要选择使用多少个 state 变量以及它们都是怎样的数据格式。尽管选择次优的 state 结构下也可以编写正确的程序，但有几个原则可以指导您做出更好的决策：
+当你编写一个存有 state 的组件时，你需要选择使用多少个 state 变量以及它们都是怎样的数据格式。尽管选择次优的 state 结构下也可以编写正确的程序，但有几个原则可以指导你做出更好的决策：
 
 1. **合并关联的 state**。如果你总是同时更新两个或更多的 state 变量，请考虑将它们合并为一个单独的 state 变量。
 2. **避免互相矛盾的 state**。当 state 结构中存在多个相互矛盾或“不一致”的 state 时，你就可能为此会留下隐患。应尽量避免这种情况。
@@ -1122,7 +1122,7 @@ export const initialTravelPlan = {
 
 **现在 state 已经“扁平化”（也称为“规范化”），更新嵌套项会变得更加容易。**
 
-现在要删除一个地点，您只需要更新两个 state 级别：
+现在要删除一个地点，你只需要更新两个 state 级别：
 
 - 其 **父级** 地点的更新版本应该从其 `childIds` 数组中排除已删除的 ID。
 - 其根级“表”对象的更新版本应包括父级地点的更新版本。
@@ -1466,7 +1466,7 @@ button { margin: 10px; }
 
 #### 改善内存使用 {/*improving-memory-usage*/}
 
-理想情况下，您还应该从“表”对象中删除已删除的项目（以及它们的子项！）以改善内存使用。还可以 [使用 Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) 使更新逻辑更加简洁。
+理想情况下，你还应该从“表”对象中删除已删除的项目（以及它们的子项！）以改善内存使用。还可以 [使用 Immer](/learn/updating-objects-in-state#write-concise-update-logic-with-immer) 使更新逻辑更加简洁。
 
 <Sandpack>
 
@@ -1826,8 +1826,8 @@ button { margin: 10px; }
 * 如果两个 state 变量总是一起更新，请考虑将它们合并为一个。
 * 仔细选择你的 state 变量，以避免创建“极难处理”的 state。
 * 用一种减少出错更新的机会的方式来构建你的 state。
-* 避免冗余和重复的 state，这样您就不需要保持同步。
-* 除非您特别想防止更新，否则不要将 props **放入** state 中。 
+* 避免冗余和重复的 state，这样你就不需要保持同步。
+* 除非你特别想防止更新，否则不要将 props **放入** state 中。 
 * 对于选择类型的 UI 模式，请在 state 中保存 ID 或索引而不是对象本身。
 * 如果深度嵌套 state 更新很复杂，请尝试将其展开扁平化。
 
@@ -1837,7 +1837,7 @@ button { margin: 10px; }
 
 #### 修复一个未更新的组件 {/*fix-a-component-thats-not-updating*/}
 
-这个 `Clock` 组件接收两个属性：`color` 和 `time`。当您在选择框中选择不同的颜色时，`Clock` 组件将从其父组件接收到一个不同的 `color` 属性。然而，由于某种原因，显示的颜色没有更新。为什么？请修复这个问题。
+这个 `Clock` 组件接收两个属性：`color` 和 `time`。当你在选择框中选择不同的颜色时，`Clock` 组件将从其父组件接收到一个不同的 `color` 属性。然而，由于某种原因，显示的颜色没有更新。为什么？请修复这个问题。
 
 <Sandpack>
 
@@ -2284,7 +2284,7 @@ ul, li { margin: 0; padding: 0; }
 
 #### 修复消失的选项 {/*fix-the-disappearing-selection*/}
 
-有一个 `letters` 列表在 state 中。当你悬停或聚焦到特定的信件时，它会被突出显示。当前突出显示的信件存储在 `highlightedLetter` state 变量中。您可以“Star”和“Unstar”单个信件，这将更新 state 中的 `letters` 数组。
+有一个 `letters` 列表在 state 中。当你悬停或聚焦到特定的信件时，它会被突出显示。当前突出显示的信件存储在 `highlightedLetter` state 变量中。你可以“Star”和“Unstar”单个信件，这将更新 state 中的 `letters` 数组。
 
 虽然这段代码可以运行，但是有一个小的 UI 问题。当你点击“Star”或“Unstar”时，高亮会短暂消失。不过只要你移动鼠标指针或者用键盘切换到另一个信件，它就会重新出现。为什么会这样？请修复它，使得在按钮点击后高亮不会消失。
 
@@ -2395,7 +2395,7 @@ li { border-radius: 5px; }
 
 这个问题点在于你将信件对象存储在 `highlightedLetter` 中。但是，你也将相同的信息存储在 `letters` 数组中。因此，你的 state 存在重复！当你在按钮点击后更新 `letters` 数组时，会创建一个新的信件对象，它与 `highlightedLetter` 不同。这就是 `highlightedLetter === letter` 执行变为 `false`，并且高亮消失的原因。当指针移动时下一次调用 `setHighlightedLetter` 时它会重新出现。
 
-为了解决这个问题，请从 state 中删除重复项。不要在两个地方存储 **信件对象本身**，而是存储 `highlightedId`。然后，您可以使用 `letter.id === highlightedId` 检查每个带有 `isHighlighted` 属性的信件，即使 `letter` 对象在上次渲染后发生了变化，这也是可行的。
+为了解决这个问题，请从 state 中删除重复项。不要在两个地方存储 **信件对象本身**，而是存储 `highlightedId`。然后，你可以使用 `letter.id === highlightedId` 检查每个带有 `isHighlighted` 属性的信件，即使 `letter` 对象在上次渲染后发生了变化，这也是可行的。
 
 <Sandpack>
 
@@ -2611,7 +2611,7 @@ label { width: 100%; padding: 5px; display: inline-block; }
 
 <Solution>
 
-在 state 中保留一个 `selectedIds` **数组**，而不是单个的 `selectedId`。例如，如果您选择了第一个和最后一个信件，则它将包含 `[0, 2]`。当没有选定任何内容时，它将为空数组 `[]`：
+在 state 中保留一个 `selectedIds` **数组**，而不是单个的 `selectedId`。例如，如果你选择了第一个和最后一个信件，则它将包含 `[0, 2]`。当没有选定任何内容时，它将为空数组 `[]`：
 
 <Sandpack>
 

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

@@ -402,7 +402,7 @@ export default function MyForm() {
 
 </Sandpack>
 
-为了帮助您注意到这个问题，React 还会向控制台打印一条错误消息：
+为了帮助你注意到这个问题，React 还会向控制台打印一条错误消息：
 
 <ConsoleBlock level="error">
 
@@ -717,7 +717,7 @@ button {
 - Refs 是一个通用概念，但大多数情况下你会使用它们来保存 DOM 元素。
 - 你通过传递 `<div ref={myRef}>` 指示 React 将 DOM 节点放入 `myRef.current`。
 - 通常，你会将 refs 用于非破坏性操作，例如聚焦、滚动或测量 DOM 元素。
-- 默认情况下，组件不暴露其 DOM 节点。 您可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。
+- 默认情况下，组件不暴露其 DOM 节点。 你可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。
 - 避免更改由 React 管理的 DOM 节点。
 - 如果你确实修改了 React 管理的 DOM 节点，请修改 React 没有理由更新的部分。
 
@@ -766,7 +766,7 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-对于额外的挑战，即使用户右键单击视频并使用内置浏览器媒体控件播放，也要使“播放”按钮与视频是否正在播放同步。 您可能需要在视频中监听 `onPlay` 和 `onPause` 才能做到这一点。
+对于额外的挑战，即使用户右键单击视频并使用内置浏览器媒体控件播放，也要使“播放”按钮与视频是否正在播放同步。 你可能需要在视频中监听 `onPlay` 和 `onPause` 才能做到这一点。
 
 <Solution>
 
@@ -819,7 +819,7 @@ button { display: block; margin-bottom: 20px; }
 
 </Sandpack>
 
-为了处理内置浏览器控件，您可以将 `onPlay` 和 `onPause` 处理程序添加到 `<video>` 元素，并调用它们的 `setIsPlaying`。 这样，如果用户使用浏览器控件播放视频，状态将相应调整。
+为了处理内置浏览器控件，你可以将 `onPlay` 和 `onPause` 处理程序添加到 `<video>` 元素，并调用它们的 `setIsPlaying`。 这样，如果用户使用浏览器控件播放视频，状态将相应调整。
 
 </Solution>
 

src/content/learn/passing-props-to-a-component.md

@@ -274,7 +274,7 @@ function Profile(props) {
 </Card>
 ```
 
-当您将内容嵌套在 JSX 标签中时，父组件将在名为 `children` 的 prop 中接收到该内容。例如，下面的 `Card` 组件将接收一个被设为 `<Avatar />` 的 `children` prop 并将其包裹在 div 中渲染：
+当你将内容嵌套在 JSX 标签中时，父组件将在名为 `children` 的 prop 中接收到该内容。例如，下面的 `Card` 组件将接收一个被设为 `<Avatar />` 的 `children` prop 并将其包裹在 div 中渲染：
 
 <Sandpack>
 

src/content/learn/reacting-to-input-with-state.md

@@ -402,7 +402,7 @@ const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 's
 
 #### 通过 reducer 来减少“不可能” state {/*eliminating-impossible-states-with-a-reducer*/}
 
-尽管这三个变量对于表示这个表单的状态来说已经足够好了，仍然是有一些中间状态并不是完全有意义的。例如一个非空的 `error` 当 `status` 的值为 `success` 时没有意义。为了更精确地模块化状态，你可以 [将状态提取到一个 reducer 中](/learn/extracting-state-logic-into-a-reducer)。Reducer 可以让您合并多个状态变量到一个对象中并巩固所有相关的逻辑！
+尽管这三个变量对于表示这个表单的状态来说已经足够好了，仍然是有一些中间状态并不是完全有意义的。例如一个非空的 `error` 当 `status` 的值为 `success` 时没有意义。为了更精确地模块化状态，你可以 [将状态提取到一个 reducer 中](/learn/extracting-state-logic-into-a-reducer)。Reducer 可以让你合并多个状态变量到一个对象中并巩固所有相关的逻辑！
 
 </DeepDive>