有没有更好的方法将 div 动态添加到现有元素？

Question

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

是否有更优化（更快、更清洁）的方法来实现这一点，通过使用 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)

});

Answer 1

既然你使用的是 React，就没有理由使用 JS 原生的 DOM 方法来进行 DOM 操作。利用 React 的 jsx 语法。这是您编写为组件的示例，该组件在组件初始化时加载数据：function EmailViewComponent() {&nbsp; const [emails, setEmails] = useState([])&nbsp; useEffect(() => {&nbsp; &nbsp; const apiCall = fetch(`/emails/${mailbox}`)&nbsp; &nbsp; &nbsp; .then(response => response.json())&nbsp; &nbsp; &nbsp; .then(emails => {&nbsp; &nbsp; &nbsp; &nbsp; setEmails(emails)&nbsp; &nbsp; &nbsp; });&nbsp; }, [])&nbsp; return (&nbsp; &nbsp; <div className="emails-view">&nbsp; &nbsp; &nbsp; <div className="enc">&nbsp; &nbsp; &nbsp; &nbsp; {emails.map(emailItem => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="email-container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="name">{emailItem.sender}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="subject">{emailItem.subject}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div className="timestamp">{emailItem.timestamp}</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; )}通过这种方式，您将能够更轻松、更清洁地维护应用程序。至于性能，我不确定哪个更快，但我总是会以方便编写更清晰的代码作为权衡。但我相信 React 团队会关注性能。