Есть ли лучший способ динамического добавления div к существующему элементу?

Question

В рамках реализации приложения электронной почты я пытаюсь загрузить все электронные письма из API и отобразить их пользователю. Я добиваюсь этого, запустив forEach l oop, в котором я создаю элемент электронной почты, заполняю соответствующие данные и добавляю их в контейнер. Затем контейнер добавляется к существующему представлению.

Есть ли более оптимизированный (более быстрый и чистый) способ добиться этого, используя либо 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. Воспользуйтесь преимуществами синтаксиса response 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>
  )
}

Таким образом вы сможете легче поддерживать приложения и

Что касается производительности, я не уверен, что быстрее, но я бы всегда go с удобством писал бы более чистый код в качестве компромисса.

Но я уверен, что Команда React уделяет внимание производительности.