Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 10 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/components/Layout/TopNav/TopNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -266,7 +266,9 @@ export default function TopNav({
<BrandMenu>
<div className="flex items-center">
<div className="uwu-visible flex items-center justify-center h-full">
<NextLink href="/">
<NextLink
href="/"
className="active:scale-95 transition-transform">
<Image
alt="logo by @sawaratsuki1004"
title="logo by @sawaratsuki1004"
Expand Down
5 changes: 5 additions & 0 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ September 2-4, 2025. Wrocław, Poland.

[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/)

### React Alicante 2025 {/*react-alicante-2025*/}
October 2-4, 2025. Alicante, Spain.

[Website](https://reactalicante.es/) - [Twitter](https://x.com/ReactAlicante) - [Bluesky](https://bsky.app/profile/reactalicante.es) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w)

### React Conf 2025 {/*react-conf-2025*/}
October 7-8, 2025. Henderson, Nevada, USA and free livestream

Expand Down
1 change: 1 addition & 0 deletions src/content/community/meetups.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ Do you have a local React.js meetup? Add it here! (Please keep the list alphabet
* [Delhi NCR](https://www.meetup.com/React-Delhi-NCR/)
* [Mumbai](https://reactmumbai.dev)
* [Pune](https://www.meetup.com/ReactJS-and-Friends/)
* [Rajasthan](https://reactrajasthan.com)

## Indonesia {/*indonesia*/}
* [Indonesia](https://www.meetup.com/reactindonesia/)
Expand Down
29 changes: 17 additions & 12 deletions src/content/learn/keeping-components-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -179,7 +179,7 @@ function Cup({ guest }) {
}

export default function TeaGathering() {
let cups = [];
const cups = [];
for (let i = 1; i <= 12; i++) {
cups.push(<Cup key={i} guest={i} />);
}
Expand Down Expand Up @@ -249,7 +249,7 @@ export default function TeaGathering() {

```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
const hours = time.getHours();
if (hours >= 0 && hours <= 6) {
document.getElementById('time').className = 'night';
} else {
Expand Down Expand Up @@ -311,7 +311,7 @@ body > * {

```js src/Clock.js active
export default function Clock({ time }) {
let hours = time.getHours();
const hours = time.getHours();
let className;
if (hours >= 0 && hours <= 6) {
className = 'night';
Expand Down Expand Up @@ -610,14 +610,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';

let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];

export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();

// 临时解决方案:防止在阅读文档时内存无限制增长。
// 我们在这里违反了自己的规则。
Expand Down Expand Up @@ -706,14 +706,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';

let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];

export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();

// 临时解决方案:防止在阅读文档时内存无限制增长。
// 我们在这里违反了自己的规则。
Expand Down Expand Up @@ -773,8 +773,13 @@ li {

```js src/StoryTray.js active
export default function StoryTray({ stories }) {
<<<<<<< HEAD
// 复制数组!
let storiesToDisplay = stories.slice();
=======
// Copy the array!
const storiesToDisplay = stories.slice();
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

// 不影响原始数组:
storiesToDisplay.push({
Expand All @@ -798,14 +803,14 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';

let initialStories = [
const initialStories = [
{id: 0, label: "Ankit's Story" },
{id: 1, label: "Taylor's Story" },
];

export default function App() {
let [stories, setStories] = useState([...initialStories])
let time = useTime();
const [stories, setStories] = useState([...initialStories])
const time = useTime();

// 临时解决方案:防止在阅读文档时内存无限制增长。
// 我们在这里违反了自己的规则。
Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/preserving-and-resetting-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -676,7 +676,11 @@ label {

</Sandpack>

<<<<<<< HEAD
当你勾选复选框后计数器的 state 被重置了。虽然你渲染了一个 `Counter`,但是 `div` 的第一个子组件从 `div` 变成了 `section`。当子组件 `div` 从 DOM 中被移除的时候,它底下的整棵树(包含 `Counter` 以及它的 state)也都被销毁了。
=======
The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

<DiagramGroup>

Expand Down
4 changes: 4 additions & 0 deletions src/content/learn/referencing-values-with-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,11 @@ export default function Toggle() {

#### 修复防抖 {/*fix-debouncing*/}

<<<<<<< HEAD
在这个例子中,所有按钮点击处理器都是 ["防抖的"](https://redd.one/blog/debounce-vs-throttle)。 要了解这意味着什么,请按下其中一个按钮。注意消息在一秒后显示。如果你在等待消息时按下按钮,计时器将重置。因此如果你多次快速单击同一个按钮,则直到你停止单击 **之后** 1 秒钟,该消息才会显示。防抖可以让你将一些动作推迟到用户“停止动作”之后。
=======
In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

这个例子可以正常运行,但并不完全符合预期。按钮不是独立的。要查看问题,请单击其中一个按钮,然后立即单击另一个按钮。你本来期望在延迟之后,你会看到两个按钮的消息。但只有最后一个按钮的消息出现了。第一个按钮的消息丢失了。

Expand Down
4 changes: 4 additions & 0 deletions src/content/reference/react-dom/createPortal.md
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,11 @@ export default function ModalContent({ onClose }) {

使用 portal 时,确保应用程序的无障碍性非常重要。例如,你可能需要管理键盘焦点,以便用户可以自然进出 portal。

<<<<<<< HEAD
创建模态对话框时,请遵循 [WAI-ARIA 模态实践指南](https://www.w3.org/WAI/ARIA/apg/#dialog_modal)。如果你使用了社区包,请确保它具有无障碍性,并遵循这些指南。
=======
Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

</Pitfall>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/rsc/server-functions.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a

</Note>

When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the server function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.
When a Server Function is defined with the [`"use server"`](/reference/rsc/use-server) directive, your framework will automatically create a reference to the Server Function, and pass that reference to the Client Component. When that function is called on the client, React will send a request to the server to execute the function, and return the result.

Server Functions can be created in Server Components and passed as props to Client Components, or they can be imported and used in Client Components.

Expand Down
14 changes: 14 additions & 0 deletions src/content/reference/rules/components-and-hooks-must-be-pure.md
Original file line number Diff line number Diff line change
Expand Up @@ -206,8 +206,13 @@ function ProductDetailPage({ product }) {

你可以将 props 和 state 视为在渲染后更新的快照。因此,你不会直接修改 props 或 state,相反,你传递新的 props,或者使用提供给你的 setter 函数来告诉 React,state 需要在下一次组件渲染时更新。

<<<<<<< HEAD
### 不要修改 props {/*props*/}
props 是不可变的,因为如果你改变了它们,应用程序可能会产生不一致的结果,这会让调试变得困难,因为程序可能会在某些情况下工作,而在另一些情况下不工作。
=======
### Don't mutate Props {/*props*/}
Props are immutable because if you mutate them, the application will produce inconsistent output, which can be hard to debug as it may or may not work depending on the circumstances.
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

```js {2}
function Post({ item }) {
Expand Down Expand Up @@ -306,7 +311,12 @@ function useIconStyle(icon) {
}, [icon, theme]);
}
```
<<<<<<< HEAD
如果你改变了 Hook 的参数,那么自定义 Hook 的缓存(memoization)就会变得不正确,因此避免这样做非常重要。
=======

If you were to mutate the Hook's arguments, the custom hook's memoization will become incorrect, so it's important to avoid doing that.
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

```js {4}
style = useIconStyle(icon); // `style` 是基于 `icon` 进行记忆化的
Expand All @@ -326,7 +336,11 @@ style = useIconStyle(icon); // 计算 `style` 的新值

## 不要改变传递给 JSX 后的值 {/*values-are-immutable-after-being-passed-to-jsx*/}

<<<<<<< HEAD
不要在 JSX 使用过值之后改变它们。应该在创建 JSX 之前完成值的更改。
=======
Don't mutate values after they've been used in JSX. Move the mutation to before the JSX is created.
>>>>>>> e90179047b1e7dd1ef19a37eed52765d8e04c484

当你在表达式中使用 JSX 时,React 可能会在组件完成渲染之前就急于计算 JSX。这意味着,如果在将值传递给 JSX 之后对它们进行更改,可能会导致 UI 过时,因为 React 不会知道需要更新组件的输出。

Expand Down