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 definedconst doubleNumber = number => number * 2;这在这里似乎很明显，但在更复杂的情况下可能不那么清楚。constvslet应该对 linter 的输出没有影响，因为虽然它们被提升了，但在初始化之前无法访问它们。顺序可以是任何你喜欢的，假设只有在依赖项可用时才进行调用，但这并不是一个好主意（这正是 linting 应该识别的）。

Answer 2

您的情况在Block 范围变量的Typescript 文档中进行了描述（导航到该部分的最后一位）。它说 ：您仍然可以在声明之前捕获块范围的变量。唯一的问题是在声明之前调用该函数是非法的。如果针对 ES2015，现代运行时会抛出错误；但是，现在 TypeScript 是宽容的，不会将此报告为错误。给出的例子是function foo() {&nbsp; &nbsp; // okay to capture 'a'&nbsp; &nbsp; return a;}// illegal call 'foo' before 'a' is declared// runtimes should throw an error herefoo();let a;在您的情况下，doubleNumber正在被捕获 inside doStuff，但doubleNumber之前已声明doStuff，因此根据文档是可以的，就像a文档示例中的变量一样。