Question

我正在测试真实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做的，因为谁想看看diff（chrome开发工具）

Answer 1

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

这很危险，只能用作测试，绝不能用于生产中的任何东西。

出于测试目的，如果您学习如何安全地创建没有innerHTML的元素，则DOM API可能会带来更好的性能。请参见https://developer.mozilla.org/en-US/docs/Web/API/Document，尤其是createElement，createTextNode和appendChild。

替换div内容

1 个答案: