From 2ab83341714a949ff30f404553c28c2af0b24a1c Mon Sep 17 00:00:00 2001 From: Soheil Nazari <113988347+s0h311@users.noreply.github.com> Date: Sat, 23 Sep 2023 06:10:41 +0200 Subject: [PATCH 01/12] Update common.md (#6290) corrected links --- src/content/reference/react-dom/components/common.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index d3cc4d5b95..8cf1fa29ba 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -100,11 +100,11 @@ These standard DOM props are also supported for all built-in components: * `onFocusCapture`: A version of `onFocus` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) * [`onGotPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/gotpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element programmatically captures a pointer. * `onGotPointerCaptureCapture`: A version of `onGotPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is pressed. +* [`onKeyDown`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is pressed. * `onKeyDownCapture`: A version of `onKeyDown` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead. +* [`onKeyPress`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keypress_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Deprecated. Use `onKeyDown` or `onBeforeInput` instead. * `onKeyPressCapture`: A version of `onKeyPress` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) -* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#pointerevent-handler) function. Fires when a key is released. +* [`onKeyUp`](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event): A [`KeyboardEvent` handler](#keyboardevent-handler) function. Fires when a key is released. * `onKeyUpCapture`: A version of `onKeyUp` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) * [`onLostPointerCapture`](https://developer.mozilla.org/en-US/docs/Web/API/Element/lostpointercapture_event): A [`PointerEvent` handler](#pointerevent-handler) function. Fires when an element stops capturing a pointer. * `onLostPointerCaptureCapture`: A version of `onLostPointerCapture` that fires in the [capture phase.](/learn/responding-to-events#capture-phase-events) From 828e30a876e179e5abe305273e73b5ae93262934 Mon Sep 17 00:00:00 2001 From: Gabriel Taveira Date: Sat, 23 Sep 2023 01:11:46 -0300 Subject: [PATCH 02/12] chore: log heading missing url error on dev only (#6280) --- src/components/Layout/Toc.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx index 628dbd61f1..5308c602ce 100644 --- a/src/components/Layout/Toc.tsx +++ b/src/components/Layout/Toc.tsx @@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) { diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 0a5151daaa..9195cccc0d 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -926,7 +926,7 @@ function ChatRoom() { useEffect(() => { const options = createOptions(); - const connection = createConnection(); + const connection = createConnection(options); connection.connect(); return () => connection.disconnect(); }, []); // ✅ All dependencies declared @@ -1613,7 +1613,7 @@ label, button { display: block; margin-bottom: 5px; } Your Effect is re-running because it depends on the `options` object. Objects can be re-created unintentionally, you should try to avoid them as dependencies of your Effects whenever possible. -The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and it pass to `createConnection`: +The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and pass it to `createConnection`: diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md index 1dbaab4a99..cdba8e54ac 100644 --- a/src/content/learn/state-a-components-memory.md +++ b/src/content/learn/state-a-components-memory.md @@ -1488,8 +1488,6 @@ Here is a fixed version that uses a regular `name` variable declared in the func ```js -import { useState } from 'react'; - export default function FeedbackForm() { function handleClick() { const name = prompt('What is your name?'); diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index 503b0abb4c..df4eddbd67 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -79,7 +79,7 @@ When React re-renders a component: 1. React calls your function again. 2. Your function returns a new JSX snapshot. -3. React then updates the screen to match the snapshot you've returned. +3. React then updates the screen to match the snapshot your function returned. diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 24b9f9eb1c..7319fdb4f9 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -767,7 +767,7 @@ Buying is not caused by rendering; it's caused by a specific interaction. It sho } ``` -**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From the user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, and pressing Back. React verifies that your components abide by this principle by remounting them once in development. +**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From a user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, then pressing Back to view the page again. React verifies that your components abide by this principle by remounting them once in development. ## Putting it all together {/*putting-it-all-together*/} From 2390627c9cb305216e6bd56e67c6603a89e76e7f Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Sat, 23 Sep 2023 14:01:57 +0800 Subject: [PATCH 05/12] fix links (#6286) --- src/content/reference/react/cache.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/cache.md b/src/content/reference/react/cache.md index db991e5852..72fa4bd365 100644 --- a/src/content/reference/react/cache.md +++ b/src/content/reference/react/cache.md @@ -4,9 +4,9 @@ canary: true --- -* `cache` is only for use with [React Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](https://react.dev/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components. +* `cache` is only for use with [React Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components). See [frameworks](/learn/start-a-new-react-project#bleeding-edge-react-frameworks) that support React Server Components. -* `cache` is only available in React’s [Canary](https://react.dev/community/versioning-policy#canary-channel) and [experimental](https://react.dev/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). +* `cache` is only available in React’s [Canary](/community/versioning-policy#canary-channel) and [experimental](/community/versioning-policy#experimental-channel) channels. Please ensure you understand the limitations before using `cache` in production. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels). @@ -68,7 +68,7 @@ The optimization of caching return values based on inputs is known as [_memoizat - React will invalidate the cache for all memoized functions for each server request. - Each call to `cache` creates a new function. This means that calling `cache` with the same function multiple times will return different memoized functions that do not share the same cache. - `cachedFn` will also cache errors. If `fn` throws an error for certain arguments, it will be cached, and the same error is re-thrown when `cachedFn` is called with those same arguments. -- `cache` is for use in [Server Components](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only. +- `cache` is for use in [Server Components](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) only. --- From 788465f36ce72364cde0b7932cfdef491a90f08d Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 24 Sep 2023 06:26:53 +0800 Subject: [PATCH 06/12] fix: resolve conflict --- src/content/learn/removing-effect-dependencies.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md index 4535b64063..5579c3afeb 100644 --- a/src/content/learn/removing-effect-dependencies.md +++ b/src/content/learn/removing-effect-dependencies.md @@ -1612,11 +1612,7 @@ label, button { display: block; margin-bottom: 5px; } Effect 因依赖于 `options` 对象，导致其重新运行。对象可能会在无意中被重新创建，你应该尽可能避免将它们作为 Effect 的依赖。 -<<<<<<< HEAD 侵入性最小的修复方法是在 Effect 外部读取 `roomId` 和 `serverUrl`，然后使 Effect 依赖于这些原始值（不能无意地更改）。在 Effect 内部，创建一个对象并将其传递给 `createConnection`： -======= -The least invasive fix is to read `roomId` and `serverUrl` right outside the Effect, and then make the Effect depend on those primitive values (which can't change unintentionally). Inside the Effect, create an object and pass it to `createConnection`: ->>>>>>> 2390627c9cb305216e6bd56e67c6603a89e76e7f From 5bca0c34ada0b86cfbe1d516d44dcdaf593aa72a Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 24 Sep 2023 06:27:37 +0800 Subject: [PATCH 07/12] fix: resolve conflict --- src/content/learn/state-as-a-snapshot.md | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md index 3a2c3af9e8..f75f720b6a 100644 --- a/src/content/learn/state-as-a-snapshot.md +++ b/src/content/learn/state-as-a-snapshot.md @@ -80,15 +80,9 @@ label, textarea { margin-bottom: 10px; display: block; } 当 React 重新渲染一个组件时： -<<<<<<< HEAD 1. React 会再次调用你的函数 -2. 你的函数会返回新的 JSX 快照 -3. React 会更新界面来匹配你返回的快照 -======= -1. React calls your function again. -2. Your function returns a new JSX snapshot. -3. React then updates the screen to match the snapshot your function returned. ->>>>>>> 2390627c9cb305216e6bd56e67c6603a89e76e7f +2. 函数会返回新的 JSX 快照 +3. React 会更新界面以匹配返回的快照 From 06a3fde12bcb0b14215f88b1af0e09f0493629d2 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 24 Sep 2023 06:29:51 +0800 Subject: [PATCH 08/12] fix: resolve conflict --- src/content/learn/synchronizing-with-effects.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md index 720f8cc30a..37803dc5d4 100644 --- a/src/content/learn/synchronizing-with-effects.md +++ b/src/content/learn/synchronizing-with-effects.md @@ -767,11 +767,7 @@ useEffect(() => { } ``` -<<<<<<< HEAD -**这个例子说明如果重新挂载破坏了程序的逻辑，则通常含有未被发现的错误**。从用户的角度来看，访问这个页面的效果，与访问该页面时单击和页面中其他链接并按下后退没有什么不同。React 通过在开发环境中重复挂载组件来验证组件是否遵守此原则。 -======= -**This illustrates that if remounting breaks the logic of your application, this usually uncovers existing bugs.** From a user's perspective, visiting a page shouldn't be different from visiting it, clicking a link, then pressing Back to view the page again. React verifies that your components abide by this principle by remounting them once in development. ->>>>>>> 2390627c9cb305216e6bd56e67c6603a89e76e7f +**这个例子说明如果重新挂载破坏了应用程序的逻辑，则通常含有未被发现的错误**。从用户的角度来看，访问一个页面不应该与访问它、点击链接然后按下返回键再次查看页面有什么不同。React 通过在开发环境中重复挂载组件以验证组件是否遵守此原则。 ## 总结 {/*putting-it-all-together*/} From c8f983733fe927738c33b2d8690dc4911e66da79 Mon Sep 17 00:00:00 2001 From: Yucohny <79147654+Yucohny@users.noreply.github.com> Date: Sun, 24 Sep 2023 07:28:37 +0800 Subject: [PATCH 09/12] fix: resolve conflict --- .../reference/react-dom/components/common.md | 123 +----------------- 1 file changed, 3 insertions(+), 120 deletions(-) diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index f54dd95397..5a3ed07d47 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -40,7 +40,6 @@ title: "普通组件（例如
）" 所有内置组件也支持这些标准的 DOM 属性： -<<<<<<< HEAD * [`accessKey`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey)：一个字符串。为该元素指定一个键盘快捷键。[通常不建议使用](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns)。 * [`aria-*`](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes)：ARIA 属性允许你为此元素指定辅助功能树信息。请参阅 [ARIA 属性](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA/Attributes) 以获取完整的参考。在 React 中，所有 ARIA 属性名称与 HTML 中完全相同。 * [`autoCapitalize`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/autocapitalize)：一个字符串。指定用户输入的大小写形式。 @@ -101,11 +100,11 @@ title: "普通组件（例如
）" * `onFocusCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events)时触发的 `onFocus` 版本。 * [`onGotPointerCapture`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/gotpointercapture_event)：一个 [`PointerEvent` 事件处理函数](#pointerevent-handler)。当元素以编程方式捕获指针时触发。 * `onGotPointerCaptureCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onGotPointerCapture` 版本。 -* [`onKeyDown`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keydown_event)：一个 [`KeyboardEvent` 事件处理函数](#pointerevent-handler)。当按键被按下时触发。 +* [`onKeyDown`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keydown_event)：一个 [`KeyboardEvent` 事件处理函数](#keyboardevent-handler)。当按键被按下时触发。 * `onKeyDownCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onKeyDown` 版本。 -* [`onKeyPress`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event)：一个 [`KeyboardEvent` 事件处理函数](#pointerevent-handler)。此属性已废弃，请使用 `onKeyDown` 或 `onBeforeInput` 替代。 +* [`onKeyPress`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keypress_event)：一个 [`KeyboardEvent` 事件处理函数](#keyboardevent-handler)。此属性已废弃，请使用 `onKeyDown` 或 `onBeforeInput` 替代。 * `onKeyPressCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onKeyPress` 版本。 -* [`onKeyUp`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keyup_event)：一个 [`KeyboardEvent` 事件处理函数](#pointerevent-handler)。当按键被释放时触发。 +* [`onKeyUp`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/keyup_event)：一个 [`KeyboardEvent` 事件处理函数](#keyboardevent-handler)。当按键被释放时触发。 * `onKeyUpCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onKeyUp` 版本。 * [`onLostPointerCapture`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/lostpointercapture_event)：一个 [`PointerEvent` 事件处理函数](#pointerevent-handler)。当元素停止捕获指针时触发。 * `onLostPointerCaptureCapture`：一个在 [捕获阶段](/learn/responding-to-events#capture-phase-events) 触发的 `onLostPointerCapture` 版本。 @@ -155,122 +154,6 @@ title: "普通组件（例如
）" * [`tabIndex`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/tabindex)：一个数字。覆盖默认的 Tab 按钮行为。[避免使用除了 -1 和 0 以外的值](https://www.tpgi.com/using-the-tabindex-attribute/)。 * [`title`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/title)：一个字符串。指定元素的工具提示文本。 * [`translate`](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Global_attributes/translate)：`'yes'` 或者 `'no'`。选择 `'no'` 将排除元素内容的翻译。 -======= -* [`accessKey`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey): A string. Specifies a keyboard shortcut for the element. [Not generally recommended.](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey#accessibility_concerns) -* [`aria-*`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes): ARIA attributes let you specify the accessibility tree information for this element. See [ARIA attributes](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes) for a complete reference. In React, all ARIA attribute names are exactly the same as in HTML. -* [`autoCapitalize`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize): A string. Specifies whether and how the user input should be capitalized. -* [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): A string. Specifies the element's CSS class name. [Read more about applying CSS styles.](#applying-css-styles) -* [`contentEditable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable): A boolean. If `true`, the browser lets the user edit the rendered element directly. This is used to implement rich text input libraries like [Lexical.](https://lexical.dev/) React warns if you try to pass React children to an element with `contentEditable={true}` because React will not be able to update its content after user edits. -* [`data-*`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*): Data attributes let you attach some string data to the element, for example `data-fruit="banana"`. In React, they are not commonly used because you would usually read data from props or state instead. -* [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir): Either `'ltr'` or `'rtl'`. Specifies the text direction of the element. -* [`draggable`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/draggable): A boolean. Specifies whether the element is draggable. Part of [HTML Drag and Drop API.](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) -* [`enterKeyHint`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/enterKeyHint): A string. Specifies which action to present for the enter key on virtual keyboards. -* [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor): A string. For [`