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()' 被函数 [=18] 使用=] 在初始化之前。但是，每当我使用这个组件时，它都会按预期呈现 - 为什么它不抛出异常？这是否意味着 React 组件中 'const' 变量的顺序可以是我们喜欢的任何顺序？

Answer 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应该识别）。

Answer 2

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

它说：

you can still capture a block-scoped variable before it’s declared. The only catch is that it’s illegal to call that function before the declaration. If targeting ES2015, a modern runtime will throw an error; however, right now TypeScript is permissive and won’t report this as an error.

给出的例子是

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。

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

Order of 'const' variables in React Stateless Components

javascript

reactjs

ecmascript-6

constants

react-16