React無狀態組件中'const'變量的順序[重復]

Question

這個問題在這里已經有了答案：

• 用 let 或 const 聲明的變量在 ES6 中沒有提升嗎？ 4 個答案

假設我有一個簡單的 React 無狀態組件，如下所示：

const myComponent = () => {
    const doStuff = () => {
        let number = 4;

        return doubleNumber(number);
    };

    const doubleNumber = number => {
        return number * 2;
    };

    return <div>Hello {doStuff()}</div>;
};

export default myComponent;

根據我收到的 eslint 錯誤，以及我對“const”如何工作的理解，我假設該組件不會呈現，因為 function“doStuff()”在初始化之前使用了 function“doubleNumber()”。 但是，每當我使用這個組件時，它都會按預期呈現 - 為什么它不拋出異常？ 這是否意味着 React 組件中 'const' 變量的順序可以是我們喜歡的任何順序？

Answer 1

代碼有效的原因是doStuff的主體在被調用之前不會執行。 由於doubleNumber恰好在調用doStuff之前定義，所以一切都很好，但是由於依賴倒置，代碼被 linter 正確識別為易碎代碼。

只有在調用doStuff時碰巧沒有初始化doubleNumber時才會發生崩潰：

const doStuff = () => doubleNumber(4);
doStuff(); // ReferenceError: doubleNumber is not defined
const doubleNumber = number => number * 2;

這在這里似乎很明顯，但在更復雜的情況下可能不是那么清楚。

const與let應該與 linter 的 output 無關，因為盡管它們被提升，但在初始化之前無法訪問它們。

順序可以是您喜歡的任何順序，假設僅在依賴項可用時才進行調用，但這並不是一個好主意（這正是 linting 應該識別的內容）。

Answer 2

您的案例在塊范圍變量的 Typescript 文檔中進行了描述（導航到該部分的最后一位）。

它說：

您仍然可以在聲明之前捕獲塊范圍的變量。 唯一的問題是在聲明之前調用 function 是非法的。 如果以 ES2015 為目標，現代運行時將拋出錯誤； 但是，現在 TypeScript 是允許的，不會將其報告為錯誤。

給出的例子是

function foo() {
    // okay to capture 'a'
    return a;
}

// illegal call 'foo' before 'a' is declared
// runtimes should throw an error here
foo();

let a;

在您的情況下， doubleNumber在doStuff中被捕獲，但是doubleNumber在doStuff之前聲明，因此根據文檔是可以的，就像文檔示例中的變量a一樣。