1 回答

TA貢獻1784條經驗 獲得超7個贊
既然你使用的是 React,就沒有理由使用 JS 原生的 DOM 方法來進行 DOM 操作。利用 React 的 jsx 語法。
這是您編寫為組件的示例,該組件在組件初始化時加載數據:
function EmailViewComponent() {
const [emails, setEmails] = useState([])
useEffect(() => {
const apiCall = fetch(`/emails/${mailbox}`)
.then(response => response.json())
.then(emails => {
setEmails(emails)
});
}, [])
return (
<div className="emails-view">
<div className="enc">
{emails.map(emailItem => (
<div className="email-container">
<div className="name">{emailItem.sender}</div>
<div className="subject">{emailItem.subject}</div>
<div className="timestamp">{emailItem.timestamp}</div>
</div>
))}
</div>
</div>
)
}
通過這種方式,您將能夠更輕松、更清潔地維護應用程序。
至于性能,我不確定哪個更快,但我總是會以方便編寫更清晰的代碼作為權衡。
但我相信 React 團隊會關注性能。
添加回答
舉報