Javascript Reactjs如何仅更新html dom元素中的部分文本？

我正在学习reactjs，偶然发现了这个特殊的细节，请看下面的图片。这是react演示，展示了reactjs如何只更新dom中已更改的部分

函数tick（）{
常量元素=(
你好，世界！
它是{new Date（）.toLocaleTimeString（）}。
);
//突出显示下一行
render（元素，document.getElementById（'root'）；
}
设置间隔（刻度，1000）；

实例：

如您所见，当时钟滴答作响时，只有文本的第二部分得到更新。根据我的经验，我可以更新单个html元素的内容，这意味着我的代码将更新h2元素的整个文本。在这里，h2元素中似乎有三个文本元素。我一定是错过了一些基础知识

---

从外观上看，似乎可以将子文本视为其自身的元素来寻址/查找和更新，在本例中，就是“3:05:42 PM”文本段。如何在纯javascript中做到这一点？

这具体是文档和代码本身的一个问题，但是我们可以看看如何在纯JS中通过这样的模拟做到这一点：

let t1 = document.createTextNode("The seconds are: ");
let t2 = document.createTextNode(new Date().getSeconds());
let t3 = document.createTextNode(". Isn't it cool?");
    
const content = document.getElementById("content");

content.appendChild(t1);
content.appendChild(t2);
content.appendChild(t3);

setInterval(() => {
  let nextT2 = document.createTextNode(new Date().getSeconds());
  content.replaceChild(nextT2, t2);
  t2 = nextT2;
}, 1000);

这里的想法是，我们能够将文本创建为单独的文本节点，稍后可以直接替换这些节点。在React的情况下，他们可以（如果他们选择的话）将文本的每个部分创建为一个单独的文本节点。React已经知道内容分为3个部分（文本、代码块、文本），因此可以得出这样的结论：他们可以选择将其作为3个文本节点附加到DOM中

---

这里我们的

setInterval

代表了最终更新DOM的某个进程的最后阶段。如果您查看开发工具，您可能只会看到数字更新，类似于您在React中看到的更新。

Thank’s Jamie。所以有一种类似于“DOMString”的对象，每天都在学习新的东西

let t1 = document.createTextNode("The seconds are: ");
let t2 = document.createTextNode(new Date().getSeconds());
let t3 = document.createTextNode(". Isn't it cool?");
    
const content = document.getElementById("content");

content.appendChild(t1);
content.appendChild(t2);
content.appendChild(t3);

setInterval(() => {
  let nextT2 = document.createTextNode(new Date().getSeconds());
  content.replaceChild(nextT2, t2);
  t2 = nextT2;
}, 1000);