React无状态组件中'const'变量的顺序[重复]答案

【问题标题】：Order of 'const' variables in React Stateless Components [duplicate]React无状态组件中'const'变量的顺序[重复]
【发布时间】：2020-01-19 21:20:50
【问题描述】：

假设我有一个简单的 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”如何工作的理解，我假设该组件不会呈现，因为函数“doubleNumber()”在它之前被函数“doStuff()”使用被初始化。但是，每当我使用这个组件时，它都会按预期呈现 - 为什么它不抛出异常？这是否意味着 React 组件中 'const' 变量的顺序可以随心所欲？

【问题讨论】：

方法doStuff在doubleNumber初始化之前被初始化但是在doubleNumber被初始化之后被调用（执行）。
在调用函数时它们都在作用域内，所以我看不到问题所在。它也与 React 或无状态组件无关
Linting 错误并不总是等同于运行时错误。 Linting 用于强制执行代码样式准则以及可能是实际错误的内容。
"基于我收到的 eslint 错误" - 您收到什么错误？请留言。

标签： javascript reactjs ecmascript-6 constants react-16

【解决方案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 的输出没有影响，因为尽管它们被提升，但在初始化之前无法访问它们。

顺序可以是任何你喜欢的，假设只有在依赖项可用时才进行调用，但这并不是一个好主意（这正是 linting 应该识别的内容）。

【讨论】：

"都没有提升" - 实际上，两者都被提升了，否则无法从声明上方的函数（主体）中引用它们。跨度>
感谢您指出这一点。这是有道理的——纠正（希望如此）。
看起来不错:-)

【解决方案2】：

Typescript documentation of Block scoped variables 中描述了您的案例（导航到该部分的最后一点）。

上面写着：

您仍然可以在声明之前捕获块范围的变量。唯一的问题是在宣言。如果以 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 一样。

【讨论】：