對於循環反應感到困惑

Question

componentDidMount() {
    for (let i = 0; i < 3; i++) {
        let i = 'not a number'
        console.log(i)  // output only one time
    }
}

componentDidMount() {
    let i = 5 // add one line...
    for (let i = 0; i < 3; i++) {
        let i = 'not a number'
        console.log(i)  // output three times
    }
}

請注意，輸出時間，如果直接在瀏覽器中運行這些循環，則這兩個代碼將輸出3次，但作為響應，在for循環中僅輸出1次。

Answer 1

我如何解決它？

更改第二個變量名稱

為什么？

在您的React環境中，您最有可能使用像Babel這樣的JS編譯器。 Babel將使用您的代碼並使之在大多數瀏覽器中可運行，因此您必須擺脫const並let某些瀏覽器不支持const ，babel會為您執行此操作並將其替換為var 。

有什么不同？ const和let是塊作用域的，而var是函數作用域的。 因此， i將您的變量提升（移動）到“函數”的頂部，並由所有人共享。 const和let是塊作用域的，因此它們僅在各自的作用域內可見，在for循環的初始化程序中聲明的i可以被初始化程序和后面的代碼塊看到，但是如果在follow塊中聲明另一個變量i ，它們將變為兩個不同的變量，例如：

for (let i = 0; i < 3; i++) {
  // they act like two different variables and are independent of each other
  let g = 'not a number'
  console.log(g)
}
// 1: i = 0, g (inner i) = 'not a number'
// 2: i = 1, g (inner i) = 'not a number'
// 3: i = 2, g (inner i) = 'not a number'

雖然React被編譯成這樣的東西

// variable i gets hoisted to the top
var i;
for (i = 0; i < 3; i++) {
  i = 'not a number'
  console.log(i)
}
// 1: i = 0
// 2: i = 'not a number' ('not a number' < 3 is false)