docs(en): merge reactjs.org/main into zh-hans.reactjs.org/main @ fc29603 (#1675)

loveloki · web-flow · commit 8d7c60e6a879 · 2025-02-26T13:42:11.000+08:00
diff --git a/src/content/blog/2025/02/14/sunsetting-create-react-app.md b/src/content/blog/2025/02/14/sunsetting-create-react-app.md
@@ -66,7 +66,7 @@ This error message will only be shown once per install.
 针对现有应用，以下指南将协助你迁移至构建工具：
 
 * [Create React App 到 Vite 迁移指南](https://www.robinwieruch.de/vite-create-react-app/)
-* [Create React App 到 Parcel 迁移指南](https://stackoverflow.com/a/49605484)
+* [Create React App 到 Parcel 迁移指南](https://parceljs.org/migration/cra/)
 * [Create React App 到 Rsbuild 迁移指南](https://rsbuild.dev/guide/migration/cra)
 
 为帮助开发者快速上手 Vite、Parcel 或 Rsbuild，我们新增了 [从零开始构建 React 应用](/learn/build-a-react-app-from-scratch) 文档。
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -649,7 +649,7 @@ button {
 - Refs 是一个通用概念，但大多数情况下你会使用它们来保存 DOM 元素。
 - 你通过传递 `<div ref={myRef}>` 指示 React 将 DOM 节点放入 `myRef.current`。
 - 通常，你会将 refs 用于非破坏性操作，例如聚焦、滚动或测量 DOM 元素。
-- 默认情况下，组件不暴露其 DOM 节点。 你可以通过使用 `forwardRef` 并将第二个 `ref` 参数传递给特定节点来暴露 DOM 节点。
+- 默认情况下，组件不暴露其 DOM 节点。 你可以通过使用 `ref` 属性来暴露 DOM 节点。
 - 避免更改由 React 管理的 DOM 节点。
 - 如果你确实修改了 React 管理的 DOM 节点，请修改 React 没有理由更新的部分。
 
@@ -1051,7 +1051,7 @@ img {
 
 <Hint>
 
-你需要 `forwardRef` 来主动从你自己的组件中暴露一个 DOM 节点，比如 `SearchInput`。
+你需要使用 `ref` 属性来主动从你自己的组件中暴露一个 DOM 节点，比如 `SearchInput`。
 
 </Hint>
 
@@ -1136,18 +1136,14 @@ export default function SearchButton({ onClick }) {
 ```
 
 ```js src/SearchInput.js
-import { forwardRef } from 'react';
-
-export default forwardRef(
-  function SearchInput(props, ref) {
-    return (
-      <input
-        ref={ref}
-        placeholder="找什么呢？"
-      />
-    );
-  }
-);
+export default function SearchInput({ ref }) {
+  return (
+    <input
+      ref={ref}
+      placeholder="找什么呢？"
+    />
+  );
+}
 ```
 
 ```css
diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md
@@ -402,7 +402,7 @@ The <CodeStep step={1}>onCaughtError</CodeStep> option is a function called with
 1. The <CodeStep step={2}>error</CodeStep> that was thrown.
 2. An <CodeStep step={3}>errorInfo</CodeStep> object that contains the <CodeStep step={4}>componentStack</CodeStep> of the error.
 
-Together with `onUncaughtError` and `onRecoverableError`, you can can implement your own error reporting system:
+Together with `onUncaughtError` and `onRecoverableError`, you can implement your own error reporting system:
 
 <Sandpack>
 
diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
@@ -214,7 +214,7 @@ export default function App() {
   ]);
   async function sendMessage(formData) {
     const sentMessage = await deliverMessage(formData.get("message"));
-    setMessages([...messages, { text: sentMessage }]);
+    setMessages((messages) => [...messages, { text: sentMessage }]);
   }
   return <Thread messages={messages} sendMessage={sendMessage} />;
 }
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
@@ -52,6 +52,7 @@ React 可以将 `<style>` 组件移动到文档的 `<head>` 中，去重相同
 这种特殊处理带来两个注意事项：
 
 * 在样式被渲染后，React 将忽略属性的更改（React 在开发环境中会对这种情况发出警告）。
+* 当设置了 `precedence` 属性的时候，React 会丢弃除了 `href` 和 `precedence` 的之外所有无关属性。
 * 即使渲染它的组件已被卸载，React 也可能将样式保留在 DOM 中。
 
 ---

Original file line number	Diff line number	Diff line change
`@@ -214,7 +214,7 @@ export default function App() {`
`214`	`214`	`]);`
`215`	`215`	`async function sendMessage(formData) {`
`216`	`216`	`const sentMessage = await deliverMessage(formData.get("message"));`
`217`		`- setMessages([...messages, { text: sentMessage }]);`
	`217`	`+ setMessages((messages) => [...messages, { text: sentMessage }]);`
`218`	`218`	`}`
`219`	`219`	`return <Thread messages={messages} sendMessage={sendMessage} />;`
`220`	`220`	`}`