2

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

4

2 回答 2

2

代码工作的原因是因为它的主体在doStuff被调用之前不会被执行。由于doubleNumber碰巧在doStuff调用之前定义了，一切都很好，但是由于依赖倒置，代码被 linter 正确识别为易碎代码。

仅当您碰巧在调用时未初始化时才会发生doubleNumber崩溃doStuff：

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

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

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

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

于 2019-09-18T21:32:46.333 回答
1

您的案例在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被捕获在内部doStuff，但doubleNumber在之前声明doStuff，因此根据文档是可以的，就像a文档示例中的变量一样。

于 2019-09-18T21:37:46.093 回答