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",