當我閱讀 React 檔案時，他們說“更新 UI 的唯一方法是創建一個新元素，并將其傳遞給 ReactDOM.render() ”。由于我在下面創建了這樣的代碼。
function Clock() {
// console.log('clock called');
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
)
return (
element
);
}
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);
//every second call Clock
setInterval(Clock, 1000);
每秒呼叫一次 Clock 組件，因此它每秒創建一個新元素。當 Clock 組件傳遞給 render 方法時。但用戶界面沒有更新。為什么？我沒有每秒呼叫渲染方法。因為檔案沒有說：“每秒呼叫一次渲染方法”。我以為當創建新元素時，會自動呼叫渲染方法。我的想法好嗎？
在檔案中，像下面這樣的代碼
function Clock(props) {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {props.date.toLocaleTimeString()}.</h2>
</div>
);
}
function tick() {
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
);
}
setInterval(tick, 1000);
在這里，他們每秒也呼叫渲染方法。但是在檔案中，他們沒有指定為每次更新呼叫渲染方法。
uj5u.com熱心網友回復：
要實作組件的動態更新，您需要使用狀態掛鉤，例如useEffect()和useState。
//import { useState } from 'react';
const { useState, useEffect } = React;
function Clock() {
const time = new Date();
// a hook to maintain the state
const [ state, setState] = useState();
// a listener to handle changes in the parameters of the array, in our case time
useEffect(() => {
setState(time.toLocaleTimeString());
}, [time])
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {state}.</h2>
</div>
)
return (
element
);
}
ReactDOM.render(
<Clock/>,
document.getElementById('root')
);
在發布的代碼中，我們使用useEffect()鉤子來回應Date()物件中的任何更改。在回呼函式之后傳入陣列。
這個鉤子有什么作用？
它呼叫useState()鉤子來更新我呼叫的狀態變數，state每當時間改變時，它會相應地顯示出來。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/334610.html