一个组件只会在其state改变或props改变时更新一次。state是组件重新呈现时记住的变量或变量集。所有其他变量将在组件重新呈现后返回其默认值。您可以将其视为组件的内存。
因此,在您的情况下,更改text变量不会更新parent的状态,因此不会重新呈现组件,这反过来也不会重新呈现和更新子组件。
如果要使父组件更新其状态(并更新子项的props),则需要像这样声明文本变量:
const [text, setText] = React.useState("This is the original text");
文本是你的变量,它现在包含在你的组件状态中,并且在组件重新渲染时将被记住。你可以给它任何想要的名称。
setText是一个函数,它更新你的text
变量,并重新渲染你的组件及其子组件。你可以给它任何想要的名称。
"这是原始文本"是你的初始状态,也是text
变量的初始值。
要更新你的状态,你可以像这样做:
setText("This is the new text");
那么在您的情况下,它将看起来像这样:
function MainPage(){
const [text, setText] = React.useState("This is the original text");
React.useEffect(() => {
const timeout = setTimeout(function(){
setText("This is the new text")
}, 3000);
return clearTimeout(timeout)
}, []);
return(<DisplayText text={text} />);
}
useEffect是必要的,可以在组件加载时定义setTimeout
。它可用于在某个变量(在[]
括号中定义)更新时立即执行一些代码。例如:如果您像这样编写:
React.useEffect(() => {
// execute some code
}, [text])
在您的text
变量更改时,它将立即执行一些代码。将[]
括号留空以仅在组件挂载和卸载时触发useEffect
。
在useEffect
钩子内声明setTimeout
,这在此情况下设置了您的计时器,使其在组件挂载时立即启动。
您的useEffect
中的return
方法会在组件卸载时清除您的超时。这将防止您的计时器在组件卸载后无限期运行。