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一样。