React Native const vs let vs var in Functional Components

Question

這是一個更廣泛的問題，關於在反應本機功能組件（與類組件相反）中使用不同的變量聲明，特別是 let 與 const 的使用，以及它們如何受渲染等影響。 對於這個問題，當我說“渲染”或“重新渲染”時，我指的是渲染函數的執行（如下面的“MyFunctionalComponent”），不一定是 UI 更新/更改。

根據我的理解，與普通 js 不同，const 變量在 react/react native 中並不完全是“常量”，並且可以像這樣更改（使用鈎子？）：

export default function MyFunctionalComponent() {

    const [test, setTest] = useState(false);

    const testFunction = () => { //some sort of function, maybe called by a button press
        setTest(true); //this can change test, but something like 'test = true' throws an error
    }
}

但是，根據我的理解，讓我們可以采取類似的行為：

export default function MyFunctionalComponent() {


    let test = false

    const testFunction = () => { //some sort of function, maybe called by a button press
        test = true;
    }
}

然而，大多數 react native 示例和教程等我看過，似乎總是使用 const 語法，即使它似乎涉及更多代碼。 為什么？ 個人喜好，還是必要性？ const 的做事方式是否以某種方式重新渲染/重新調用 MyFunctionalComponent 並為 const 變量賦予一個新值？

接下來，我不確定導致這種情況的確切行為，但有時在功能組件中使用 const 語法時，變量會在渲染調用之間更改並保存狀態，有時，const 變量會在每個時間重置為其默認狀態調用渲染的時間。 （我知道這部分是模糊的，所以如果沒有足夠的細節可以忽略它）為什么會發生這種情況？

同樣，當在函數組件之外而不是在函數組件內部創建 const 時，我看到了不同的行為……作用域是否像您期望的那樣工作？ 他們（仍然？）在新的渲染調用中重新實例化了嗎？ 'setState' 會調用重新渲染嗎？ 縮短上一個問題，為什么我的一些常量在重新渲染時保留其狀態，而有些似乎重置為默認值？

var 在哪里，它是否與常規 js 中的行為相同，還是也受 react 的影響？ （我覺得我已經掌握了常規 js 中這些變量聲明的差異，但是 react 的這種 const 行為讓我質疑這一切）。

所以總的來說，問題基本上是，let、var 和 const 的區別/優勢是什么，特別是在 react/react native 中，它們與常規 javascript 有何不同？

最后，它在 React Native 中的類組件和功能組件之間有區別嗎？

感謝您閱讀這么長的問題。

Answer 1

個人喜好，還是必要性？

僅偏好和風格。

使用const來聲明一個有狀態變量而不是var或let使代碼的意圖更加清晰。 這不是必需的——你看到的幾乎所有組件如果使用var或let也能正常工作——但它會給閱讀代碼的人帶來一些混淆的可能性。

React 是用 JavaScript 編寫的。 React 中的有狀態變量，用const聲明，不能重新賦值，就像在普通 JavaScript 中一樣。 您缺少的關鍵是每次重新渲染時都會再次調用組件函數，從而導致調用useState函數返回不同的值。

有關這如何在帶有const並多次調用函數的 vanilla JS 中工作的快速示例：

 let i = 0; const getI = () => i; const fn = () => { const theValue = getI(); console.log(theValue); i++; setTimeout(fn, 1000); }; fn();

並不是變量被重新分配（由於使用const會被禁止），而是整個函數再次運行，導致在新初始化時為用const聲明的變量分配一個新值。

接下來，我不確定導致這種情況的確切行為，但有時在功能組件中使用 const 語法時，變量會在渲染調用之間更改並保存狀態，有時，const 變量會在每個時間重置為其默認狀態調用渲染的時間。 （我知道這部分是模糊的，所以如果沒有足夠的細節可以忽略它）為什么會發生這種情況？

您可能指的是過時的關閉問題。 如果導致看到差異的變量綁定來自先前的渲染，而不是當前的渲染，則可能會發生這種情況。

對於在 vanilla JS 中可能是什么樣子的快速示例，根據上述代碼段改編，我將在第一次渲染時添加超時，這將導致僅使用來自第一次渲染的i ：

 let i = 0; const getI = () => i; const fn = () => { const theValue = getI(); console.log(theValue); if (theValue === 0) { // first render setTimeout(() => { console.log('Timeout from first render running, sees a theValue of:', theValue); }, 5000); } i++; setTimeout(fn, 1000); }; fn();

同樣，當在函數組件之外而不是在函數組件內部創建 const 時，我看到了不同的行為……作用域是否像您期望的那樣工作？ 他們（仍然？）在新的渲染調用中重新實例化了嗎？

取決於該變量所在的塊。如果它在另一個組件中，它可能會被重新初始化。 如果它不在另一個組件中，那么它可能不是。 例如，這是常見的有一個模塊是出口組件與一些絕對不變的const的值，所有的組件都使用聲明向上頂，例如

const apiKey = 'someApiKey';
export const ApiInterface = () => {
  // ...
};

至於const VS let和var而言，這個問題let和var的是，他們允許重新分配-但要改變一個狀態變量作出反應的唯一正確途徑是調用狀態決定部，而不是重新分配變量。 調用狀態設置器會導致重新渲染； 重新分配變量不會導致重新渲染，重新分配變量將導致分配的值在下一次重新渲染時丟失。 因此，完全清楚不應重新分配有狀態變量是一個好主意。

最后，它在 React Native 中的類組件和功能組件之間有區別嗎？

是的，在類組件中，狀態作為實例的屬性（ this ）。 狀態不再是一個獨立的const標識符，而是一個更大對象的屬性，所以對於類組件中的有狀態值，沒有const vs let vs var - 除非您從狀態中提取值並將它們自己放入普通的獨立變量中，其中如果它們的行為就像任何其他獨立變量一樣。