React无状态组件中“const”变量的顺序

Question

假设我有一个简单的 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”变量的顺序可以随心所欲？

Answer 1

代码工作的原因是因为doStuff直到调用它的主体才会执行。由于doubleNumber碰巧在doStuff被调用之前定义，所以一切都很好，但是由于依赖倒置，linter 正确地将代码识别为脆弱的。

仅当您碰巧在调用doubleNumber时间之前没有初始化时才会发生崩溃doStuff：

const doStuff = () => doubleNumber(4);

doStuff(); // ReferenceError: doubleNumber is not defined

const doubleNumber = number => number * 2;

这在这里似乎很明显，但在更复杂的情况下可能不那么清楚。

constvslet应该对 linter 的输出没有影响，因为虽然它们被提升了，但在初始化之前无法访问它们。

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

Answer 2

您的情况在Block 范围变量的Typescript 文档中进行了描述（导航到该部分的最后一位）。

它说 ：

您仍然可以在声明之前捕获块范围的变量。唯一的问题是在声明之前调用该函数是非法的。如果针对 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正在被捕获 inside doStuff，但doubleNumber之前已声明doStuff，因此根据文档是可以的，就像a文档示例中的变量一样。