Question

我是React的初学者，尽管曾经在多个JS框架（如Angular）上工作。我正在阅读他们的教程，并陷入了下面URL中提到的一个概念。

https://reactjs.org/docs/rendering-elements.html

它说-

“ React DOM将元素及其子元素与上一个元素进行比较，并且仅应用将DOM引入到所需状态。”

他们通过时钟示例进行了演示

我正在观看以下用Vanilla JavaScript编写的URL的秒表演示。当我检查DOM时，会看到类似的DOM更新行为。

Stop Watch @ Codepen

我不明白React在他们的子元素渲染概念中强调了什么。

任何帮助将不胜感激

var timing = false;
var interval;
var time = 0;
var count = document.getElementById("time");
var s = document.getElementById("s");
var r = document.getElementById("r");
var t = document.getElementById("t");
var past = document.getElementById("past");


function startstop(){
    if(!timing) {
        interval = setInterval(function () {
            time += 0.01;
            count.innerHTML = time.toFixed(2).toString();
        }, 10);
        timing = true;
    } else {
        clearInterval(interval);
        timing = false;
    }
}

function reset(){
    clearInterval(interval);
    time = 0;
    count.innerHTML = "0";
    timing = false;
    past.innerHTML = "";
}

function record(){
    var node = document.createElement("li");
    var textnode=document.createTextNode(count.innerHTML);
    node.appendChild(textnode);
    past.appendChild(node);
}

s.addEventListener("click",startstop);//not s.addEventListener("click",startstop());
r.addEventListener("click",reset);
t.addEventListener("click",record);

document.addEventListener("keydown",function(event){
  var press = event.key;
  switch (press)
  {
    case "s" :
      startstop()
      break;
    case "r":
      reset()
      break;
    case "t":
      record()
      break;
    default:
      return
  }
});

*{
  text-align: center;
  margin:20px 10px;
  color:#C096E6;
}

h1{
  margin-top:50px;
}

#time{
  font-size:40px;  
}

button{
  width: 100px;
  height: 100px;
  color:#ffffff;
  background-color: #C096E6;
  border-radius: 50%;
  border:none;
  outline:none;
  &:hover{
    color: #C096E6;
    background-color: #ffffff;
    border: 1px solid #C096E6;
  }
}

ul{
  margin-left: -20px;
  list-style: none;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Game</title>

</head>
<body>
  <h1>Stopwatch Demo</h1>
  <p id="time">0</p>

  <button id="s">Start/Stop</button>
  <button id="r">Reset</button>
  <button id="t">Record Time</button>

  <p>Past Times</p>
  <ul id="past"></ul>


</body>
</html>

与Vanilla JS更新方法相比，React Dom更新的工作方式

0 个答案: