diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 67f42ead42..99a592c4ce 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -269,7 +269,7 @@ body { function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
  • ); } @@ -307,7 +307,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
  • ); } diff --git a/src/content/learn/conditional-rendering.md b/src/content/learn/conditional-rendering.md index f653406498..9c41604bc6 100644 --- a/src/content/learn/conditional-rendering.md +++ b/src/content/learn/conditional-rendering.md @@ -54,13 +54,13 @@ export default function PackingList() { -需要注意的是,有些 `Item` 组件的 `isPacked` 属性是被设为 `true` 而不是 `false`。你可以在那些满足 `isPacked={true}` 条件的物品旁加上一个勾选符号(✔)。 +需要注意的是,有些 `Item` 组件的 `isPacked` 属性是被设为 `true` 而不是 `false`。你可以在那些满足 `isPacked={true}` 条件的物品旁加上一个勾选符号(✅)。 你可以用 [if/else 语句](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/if...else) 去判断: ```js if (isPacked) { - return
  • {name} ✔
  • ; + return
  • {name} ✅
  • ; } return
  • {name}
  • ; ``` @@ -72,7 +72,7 @@ return
  • {name}
  • ; ```js function Item({ name, isPacked }) { if (isPacked) { - return
  • {name} ✔
  • ; + return
  • {name} ✅
  • ; } return
  • {name}
  • ; } @@ -161,7 +161,7 @@ export default function PackingList() { 在之前的例子里,你在组件内部控制哪些 JSX 树(如果有的话!)会返回。你可能已经发现了在渲染输出里会有一些重复的内容: ```js -
  • {name} ✔
  • +
  • {name} ✅
  • ``` 和下面的写法很像: @@ -174,7 +174,7 @@ export default function PackingList() { ```js if (isPacked) { - return
  • {name} ✔
  • ; + return
  • {name} ✅
  • ; } return
  • {name}
  • ; ``` @@ -189,7 +189,7 @@ JavaScript 有一种紧凑型语法来实现条件判断表达式——[条件 ```js if (isPacked) { - return
  • {name} ✔
  • ; + return
  • {name} ✅
  • ; } return
  • {name}
  • ; ``` @@ -199,12 +199,12 @@ return
  • {name}
  • ; ```js return (
  • - {isPacked ? name + ' ✔' : name} + {isPacked ? name + ' ✅' : name}
  • ); ``` -你可以认为,*“如果 `isPacked` 为 true 时,则(`?`)渲染 `name + ' ✔'`,否则(`:`)渲染 `name`。”* +你可以认为,*“如果 `isPacked` 为 true 时,则(`?`)渲染 `name + ' ✅'`,否则(`:`)渲染 `name`。”* @@ -224,7 +224,7 @@ function Item({ name, isPacked }) {
  • {isPacked ? ( - {name + ' ✔'} + {name + ' ✅'} ) : ( name @@ -267,7 +267,7 @@ export default function PackingList() { ```js return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
  • ); ``` @@ -282,7 +282,7 @@ return ( function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
  • ); } @@ -339,7 +339,7 @@ let itemContent = name; ```js if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } ``` @@ -359,7 +359,7 @@ if (isPacked) { function Item({ name, isPacked }) { let itemContent = name; if (isPacked) { - itemContent = name + " ✔"; + itemContent = name + " ✅"; } return (
  • @@ -403,7 +403,7 @@ function Item({ name, isPacked }) { if (isPacked) { itemContent = ( - {name + " ✔"} + {name + " ✅"} ); } @@ -466,7 +466,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
  • ); } @@ -504,7 +504,7 @@ export default function PackingList() { function Item({ name, isPacked }) { return (
  • - {name} {isPacked ? '✔' : '❌'} + {name} {isPacked ? '✅' : '❌'}
  • ); } diff --git a/src/content/learn/describing-the-ui.md b/src/content/learn/describing-the-ui.md index 526c1ac88b..8776165d1a 100644 --- a/src/content/learn/describing-the-ui.md +++ b/src/content/learn/describing-the-ui.md @@ -330,7 +330,7 @@ export function getImageUrl(person, size = 's') { function Item({ name, isPacked }) { return (
  • - {name} {isPacked && '✔'} + {name} {isPacked && '✅'}
  • ); } diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 54d2e83300..af2e16f2d1 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -408,9 +408,9 @@ function Game() { 这段代码里有两个问题。 -一个问题是它非常低效:在链式的每个 `set` 调用之间,组件(及其子组件)都不得不重新渲染。在上面的例子中,在最坏的情况下(`setCard` → 渲染 → `setGoldCardCount` → 渲染 → `setRound` → 渲染 → `setIsGameOver` → 渲染)有三次不必要的重新渲染。 +第一个问题是它非常低效:在链式的每个 `set` 调用之间,组件(及其子组件)都不得不重新渲染。在上面的例子中,在最坏的情况下(`setCard` → 渲染 → `setGoldCardCount` → 渲染 → `setRound` → 渲染 → `setIsGameOver` → 渲染)有三次不必要的重新渲染。 -即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。 +第二个问题是,即使不考虑渲染效率问题,随着代码不断扩展,你会遇到这条 “链式” 调用不符合新需求的情况。试想一下,你现在需要添加一种方法来回溯游戏的历史记录,可以通过更新每个 state 变量到之前的值来实现。然而,将 `card` 设置为之前的的某个值会再次触发 Effect 链并更改你正在显示的数据。这样的代码往往是僵硬而脆弱的。 在这个例子中,更好的做法是:尽可能在渲染期间进行计算,以及在事件处理函数中调整 state: diff --git a/vercel.json b/vercel.json index eac0efb9c4..8b0546e372 100644 --- a/vercel.json +++ b/vercel.json @@ -24,6 +24,11 @@ "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", "permanent": false }, + { + "source": "/docs/lists-and-keys", + "destination": "/learn/rendering-lists#keeping-list-items-in-order-with-key", + "permanent": false + }, { "source": "/link/invalid-hook-call", "destination": "/warnings/invalid-hook-call-warning",