diff --git a/src/components/Layout/TopNav/TopNav.tsx b/src/components/Layout/TopNav/TopNav.tsx index b73dbe77c2..028d4b5077 100644 --- a/src/components/Layout/TopNav/TopNav.tsx +++ b/src/components/Layout/TopNav/TopNav.tsx @@ -266,7 +266,9 @@ export default function TopNav({
- + logo by @sawaratsuki1004); } @@ -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 { @@ -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'; @@ -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(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 @@ -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(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 @@ -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({ @@ -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(); // 临时解决方案：防止在阅读文档时内存无限制增长。 // 我们在这里违反了自己的规则。 diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md index b1b26c7fcf..235eaf4524 100644 --- a/src/content/learn/preserving-and-resetting-state.md +++ b/src/content/learn/preserving-and-resetting-state.md @@ -676,7 +676,11 @@ label { +<<<<<<< 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 diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index f0334bad12..bf7050c121 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -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 这个例子可以正常运行，但并不完全符合预期。按钮不是独立的。要查看问题，请单击其中一个按钮，然后立即单击另一个按钮。你本来期望在延迟之后，你会看到两个按钮的消息。但只有最后一个按钮的消息出现了。第一个按钮的消息丢失了。 diff --git a/src/content/reference/react-dom/createPortal.md b/src/content/reference/react-dom/createPortal.md index b309cfb9ec..3bcaf44ab9 100644 --- a/src/content/reference/react-dom/createPortal.md +++ b/src/content/reference/react-dom/createPortal.md @@ -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 diff --git a/src/content/reference/rsc/server-functions.md b/src/content/reference/rsc/server-functions.md index 770f5a705e..2603c10992 100644 --- a/src/content/reference/rsc/server-functions.md +++ b/src/content/reference/rsc/server-functions.md @@ -28,7 +28,7 @@ To support Server Functions as a bundler or framework, we recommend pinning to a -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. diff --git a/src/content/reference/rules/components-and-hooks-must-be-pure.md b/src/content/reference/rules/components-and-hooks-must-be-pure.md index fcd56c5928..02739fc1a0 100644 --- a/src/content/reference/rules/components-and-hooks-must-be-pure.md +++ b/src/content/reference/rules/components-and-hooks-must-be-pure.md @@ -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 }) { @@ -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` 进行记忆化的 @@ -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 不会知道需要更新组件的输出。