Блог

Главная - Вопросы по программированию - Заменить содержимое div

Заменить содержимое div

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я тестирую разницу между реальным DOM и виртуальным DOM. Итак, я привожу пример с setInterval отображением div времени показа в секунду. Но я не знаю, как заменять содержимое div#real-dom каждый раз.

 function replaceWithVDOM() {
    let element = (
      <div>
          <h2>What time is it? - With ReactJS</h2>
          <h3>It is {new Date().toLocaleTimeString()}.</h3>
      </div>
    )
    ReactDOM.render(element, document.getElementById("root"))
}

function replaceWithRDOM() {
    let element = `
        <div>
            <h2>What time is it? - Without ReactJS</h2>
            <h3>It is ${new Date().toLocaleTimeString()}.</h3>
        </div>`

    // Update the div#real-dom with the elemet here
}

setInterval(replaceWithVDOM, 1000);
//setInterval(replaceWithRDOM, 1000);  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
-----------------------
<div id="real-dom"></div>

Есть предложения?

ОБНОВЛЕНО:

Спасибо за помощь. Теперь я вижу разницу между ними. Я сделал это в codepen, для тех, кто хочет увидеть разницу (chrome dev tools)

Комментарии:

1. я думаю, что можно обойтись простой заменой document.getElementById("real-dom").innerHTML =new Date().toLocaleTimeString();

Ответ №1:

 document.getElementById("real-dom").innerHTML = element;

Это опасно и должно использоваться только в качестве теста, никогда ни для чего в производстве.

Однако для целей тестирования вы, вероятно, увидите более высокую производительность DOM API, если узнаете, как безопасно создавать элементы без innerHTML. Смотрите https://developer.mozilla.org/en-US/docs/Web/API/Document , в частности createElement , createTextNode и appendChild .