Javascript 是否有更好的方法将div动态添加到现有元素中？

作为实现电子邮件应用程序的一部分，我尝试从API加载所有电子邮件并将其显示给用户。我通过运行一个forEach循环来实现这一点，在这个循环中，我创建了一个email元素，填充相关的细节并将其附加到一个容器中。然后将容器附加到现有视图

是否有一种更优化（更快更干净）的方法来实现这一点，使用vanilla JS或React

fetch(`/emails/${mailbox}`)
  .then(response => response.json())
  .then(emails => {
    var enc = document.createElement('div');
    enc.className = "enc";
    
    emails.forEach(element => {
      let name = document.createElement('div');
      name.className = "name";
      name.innerHTML = element.sender;

      let subject = document.createElement('div');
      subject.className = "subject";
      subject.innerHTML = element.subject;

      let timestamp = document.createElement('div')
      timestamp.className = "timestamp";
      timestamp.innerHTML = element.timestamp;

      let container = document.createElement('div');
      container.className = "email-container";
      container.appendChild(name);
      container.appendChild(subject);
      container.appendChild(timestamp);

      enc.appendChild(container);
    });
    document.getElementById('emails-view').appendChild(enc)
});

---

因为您使用的是React，所以没有理由使用JS原生DOM方法进行DOM操作。利用react的jsx语法

以下是作为组件编写的示例，该组件在组件初始化时加载数据：

函数EmailViewComponent（）{
const[emails，setEmails]=useState（[]）
useffect（（）=>{
const apiCall=fetch（`/emails/${mailbox}`）
.then（response=>response.json（））
。然后（电子邮件=>{
设置电子邮件（电子邮件）
});
}, [])
返回(
{emails.map（emailItem=>(
{emailItem.sender}
{emailItem.subject}
{emailItem.timestamp}
))}
)
}

通过这种方式，您将能够更轻松、更干净地维护应用程序

至于性能，我不确定哪一个更快，但我总是以编写更干净的代码为代价

---

但我相信React团队会关注性能。

“是否有更优化的方法…”-请定义“优化”。更少的内存使用，更快的元素创建，更少的DOM更改，更少的方法调用，…我所说的优化是指更快、更干净地向DOM动态添加元素。为什么您认为您的方法很慢？为什么这不是一个“清晰”的方法？我不确定这是一个好的方法还是有更好的方法。我是JavaScript新手，我想知道使用innerHTML或react组件是否会使开发更复杂的HTML代码更容易。更干净的方法：使用react自定义可重用组件。这看起来确实更干净。谢谢另外，我不熟悉react和JavaScript，不熟悉useState和useEffect，但你是说email.map（），不是email.map（）？