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 回答