【React】React 测验!!
首先
突然ですが、クイズです!
React.jsの初心者向けに、3つの問題を考えました。
クイズは、Reactの関数コンポーネントを使用した状態とライフサイクルに関する問題です。
答案在文章的末尾提及。
问题1:如果执行以下代码,将按照什么顺序执行?
请用A到C的回答来回答。
import React, {useState, useEffect} from 'react'
const Button = () => {
const [count, setCount] = useState(0)
useEffect(()=> {
// ①
console.log("①")
return ()=> {
// ②
console.log("②")
}
}, [])
return (
// ③
<div>
{count}
</div>
)
}
export default Button
答案:
A. ① → ② → ③
B. ③ → ① → ②
C. ② → ③ → ①
A. ① 转到 ②,再转到 ③
B. ③ 转到 ①,再转到 ②
C. ② 转到 ③,再转到 ①
第2题:如果有以下这段代码,count的值会是多少?
import React, {useState, useEffect} from 'react'
const Button = () => {
const [count, setCount] = useState(0)
useEffect(()=> {
setCount(count + 100)
setCount(count + 1000)
setCount(count + 10000)
setCount(count + 10000)
setCount(count + 100000)
setCount(count + 1000000)
return ()=> {
console.log("clean up")
}
}, [])
return(
<></>
)
}
export default Button
以下是本题目的中文解释,请选一个:
A. 1111100
B. 100
C. 1000000
D. 1121100
A. 二进制数1111100
B. 二进制数100
C. 二进制数1000000
D. 二进制数1121100
第3题:如果有以下代码,请回答正确的初始挂载顺序。
import React, {useState, useEffect} from 'react'
const Button = () => {
const [count1, setCount1] = useState(0)
const [count2, setCount2] = useState(0)
const [count3, setCount3] = useState(0)
useEffect(()=> {
// ①
console.log("update count1")
}, [count1])
useEffect(()=> {
// ②
console.log("update count3")
}, [count3])
useEffect(()=> {
// ③
console.log("update")
return ()=> {
console.log("clear")
}
}, [])
useEffect(()=> {
// ④
console.log("update count2")
}, [count2])
return(
<></>
)
}
export default Button
答案:
A. ③ → ① → ④ → ②
B. ① → ② → ③ → ④
C. ③ → ① → ② → ④
D. ④ → ③ → ② → ①
回答:
A. ③ → ① → ④ → ②
B. ① → ② → ③ → ④
C. ③ → ① → ② → ④
D. ④ → ③ → ② → ①
请用中文转述以下内容。只需要一个选择。
Can you help me find a nearby restaurant?
请提供原文内容,以便我对其进行中文本地化的改写。
The boy went to the store to buy some apples.
在中国只需要提供一个选项。
这句话的含义是指在中国只需要选择一个选项。
请用中文原生化改写以下句子,只需给出一个选项:
– “I have been studying Chinese for five years.”
– “我已经学习中文五年了。”
请用中文将以下内容进行释义,只需要给出一个版本 :
“Can you please pass me the salt?”
以下是一种选项,以中文作为母语进行改述:
请用中文进行适当的改述:
以下是需要一种选项的中文本地化改写:
翻译如下:
以下是其在中文中本地化后的释义:
–
問題的答案
-
- 第1問の答え: B. ( ③がclassにおけるrender()、①がcomponent Did Mount()、②がcomponent will unmount()に該当する。)
-
- 第2問の答え: C.
- 第3問の答え: B. コードは上から順番に実行されます。component Did Mount()後のアップデートでは、①→②→④の順に実行されます。