有没有更好的方法将 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() {

  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 团队会关注性能。