From 1dfc88fe46b2ca169083377f0f716d8e7951af81 Mon Sep 17 00:00:00 2001 From: Alain Kaiser Date: Sun, 1 Oct 2023 11:25:16 +0200 Subject: [PATCH 1/4] fix: typo in useMemo example (#6330) --- src/content/reference/react/useMemo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 543c111250..c96c1a9426 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,7 +647,7 @@ In this example, the `List` component is **artificially slowed down** so that yo Switching the tabs feels slow because it forces the slowed down `List` to re-render. That's expected because the `tab` has changed, and so you need to reflect the user's new choice on the screen. -Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleItems` array has not changed since the last render. The `visibleItems` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. +Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. From 68f417a600c7d7b8c4131e39f8a843a856ae3909 Mon Sep 17 00:00:00 2001 From: Sebastian Silbermann Date: Sun, 1 Oct 2023 12:16:27 +0200 Subject: [PATCH 2/4] Explain how `null` ends up in `ref.current` for React-managed refs (#5836) * Update referencing-values-with-refs.md * Update src/content/learn/referencing-values-with-refs.md --- src/content/learn/referencing-values-with-refs.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index da5d864aba..4faf18786f 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -284,7 +284,7 @@ You also don't need to worry about [avoiding mutation](/learn/updating-objects-i ## Refs and the DOM {/*refs-and-the-dom*/} -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) +You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) From 82075f4a4b01d85e3687e1d0efae3f69cca70c15 Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Mon, 2 Oct 2023 09:05:50 +0800 Subject: [PATCH 3/4] fix conflicts --- src/content/learn/referencing-values-with-refs.md | 6 +----- src/content/reference/react/useMemo.md | 6 +----- 2 files changed, 2 insertions(+), 10 deletions(-) diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md index 94a7133191..0791c12f1e 100644 --- a/src/content/learn/referencing-values-with-refs.md +++ b/src/content/learn/referencing-values-with-refs.md @@ -287,11 +287,7 @@ console.log(ref.current); // 5 ## ref 和 DOM {/*refs-and-the-dom*/} -<<<<<<< HEAD -你可以将 ref 指向任何值。但是，ref 最常见的用法是访问 DOM 元素。例如，如果你想以编程方式聚焦一个输入框，这种用法就会派上用场。当你将 ref 传递给 JSX 中的 `ref` 属性时，比如 `
`，React 会将相应的 DOM 元素放入 `myRef.current` 中。你可以在 [使用 ref 操作 DOM](/learn/manipulating-the-dom-with-refs) 中阅读更多相关信息。 -======= -You can point a ref to any value. However, the most common use case for a ref is to access a DOM element. For example, this is handy if you want to focus an input programmatically. When you pass a ref to a `ref` attribute in JSX, like `
`, React will put the corresponding DOM element into `myRef.current`. Once the element is removed from the DOM, React will update `myRef.current` to be `null`. You can read more about this in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +你可以将 ref 指向任何值。但是，ref 最常见的用法是访问 DOM 元素。例如，如果你想以编程方式聚焦一个输入框，这种用法就会派上用场。当你将 ref 传递给 JSX 中的 `ref` 属性时，比如 `
`，React 会将相应的 DOM 元素放入 `myRef.current` 中。当元素从 DOM 中删除时，React 会将 `myRef.current` 更新为 `null`。你可以在 [使用 ref 操作 DOM](/learn/manipulating-the-dom-with-refs) 中阅读更多相关信息。 diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 1aeaf5be6f..792c5985c2 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,11 +647,7 @@ export default function TodoList({ todos, tab, theme }) { 切换选项卡感觉很慢，因为它迫使减速的 `List` 重新渲染。这是预料之中的，因为选项卡 `tab` 已更改，因此你需要在屏幕上展示用户的新选择。 -<<<<<<< HEAD -接下来，尝试切换主题。**感谢 `useMemo` 和 [`memo`](/reference/react/memo)，尽管被人为减速了，但是它还是很快**！由于作为依赖性传递给 `useMemo` 的 `todos` 与 `tab` 都没有发生改变，因此 `visibaleItems` 不会发生改变。由于 `visibleItems` 数组从上一次渲染之后就没有发生改变，所以 `List` 会跳过重新渲染。 -======= -Next, try toggling the theme. **Thanks to `useMemo` together with [`memo`](/reference/react/memo), it’s fast despite the artificial slowdown!** The `List` skipped re-rendering because the `visibleTodos` array has not changed since the last render. The `visibleTodos` array has not changed because both `todos` and `tab` (which you pass as dependencies to `useMemo`) haven't changed since the last render. ->>>>>>> 68f417a600c7d7b8c4131e39f8a843a856ae3909 +接下来，尝试切换主题。**感谢 `useMemo` 和 [`memo`](/reference/react/memo)，尽管被人为减速了，但是它还是很快**！由于作为依赖性传递给 `useMemo` 的 `todos` 与 `tab` 都没有发生改变，因此 `visibaleTodos` 不会发生改变。由于 `visibleTodos` 数组从上一次渲染之后就没有发生改变，所以 `List` 会跳过重新渲染。 From fbe9d4b0d19cd5eee4dfdbbc1d4a3d1d4c77bc5a Mon Sep 17 00:00:00 2001 From: Xavi Lee Date: Mon, 2 Oct 2023 09:09:40 +0800 Subject: [PATCH 4/4] fix typo [skip ci] --- src/content/reference/react/useMemo.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/useMemo.md b/src/content/reference/react/useMemo.md index 792c5985c2..e2ec06f051 100644 --- a/src/content/reference/react/useMemo.md +++ b/src/content/reference/react/useMemo.md @@ -647,7 +647,7 @@ export default function TodoList({ todos, tab, theme }) { 切换选项卡感觉很慢，因为它迫使减速的 `List` 重新渲染。这是预料之中的，因为选项卡 `tab` 已更改，因此你需要在屏幕上展示用户的新选择。 -接下来，尝试切换主题。**感谢 `useMemo` 和 [`memo`](/reference/react/memo)，尽管被人为减速了，但是它还是很快**！由于作为依赖性传递给 `useMemo` 的 `todos` 与 `tab` 都没有发生改变，因此 `visibaleTodos` 不会发生改变。由于 `visibleTodos` 数组从上一次渲染之后就没有发生改变，所以 `List` 会跳过重新渲染。 +接下来，尝试切换主题。**感谢 `useMemo` 和 [`memo`](/reference/react/memo)，尽管被人为减速了，但是它还是很快**！由于作为依赖性传递给 `useMemo` 的 `todos` 与 `tab` 都没有发生改变，因此 `visibleTodos` 不会发生改变。由于 `visibleTodos` 数组从上一次渲染之后就没有发生改变，所以 `List` 会跳过重新渲染。