在定义之前使用的 React Function 组件方法；这真的是个问题吗？

Question

各位开发者大家好，

我有一个问题，我的同事似乎没有就此达成一致。

考虑到 JS 提升和组件安装时不调用函数表达式，似乎可以安全地假设我们通过声明违反“在定义之前使用”的方法不会有任何问题。

但我想知道忽略 lint 的警告并按字母顺序或根据逻辑块或其他方式声明组件的功能是否安全...？即使先声明的函数调用后声明的另一个函数？

例如（这只是一个具有很多功能的大型功能组件的简化，其他开发人员很难围绕所有这些功能进行组织）：

const SomeRandomFC = () => {

  // User logics
    const changeUser = id => {
    if (id !=== currentId) {
      getDatabase(id);
    }
    const getUser = id => ...

 // Database logics
   const getDatabase = user => [fetch logics];
   const updateDatabase = id => ... 

}

谢谢！

Answer 1

撇开意见不谈，假设你有：

const a = () => {
    b();
};
// a(); // <== Would fail
const b = () => {
    // ...
};
a(); // <== Works

从“是否有效”的角度来看，末尾的调用没有问题，因为调用发生时，b 已经初始化。但是，如果您取消注释上面对 a 的第一次调用，它将失败，因为 b 尚未初始化。

你提到了提升。请注意，由于您使用的是分配给常量的函数表达式而不是函数声明，因此只会提升常量的声明，而不是该常量的 initialization。相反，如果你有一个函数声明，它的绑定声明和该绑定的初始化都会被提升：

function a() {
    b();
}
a(); // <== Works
function b() {
    // ...
}
a(); // <== Works

请注意，在第一个示例中失败的调用在第二个示例中有效。

（请不要将此视为使用函数声明的建议。它不是。我只是指出行为上的差异。）

无论您是将常量与函数表达式还是函数声明一起使用，您布置函数的顺序取决于您和您的团队，前提是您没有像对 [= 的注释掉的调用那样的情况13=] 在上面的第一个代码块中。

在定义之前使用的 React Function 组件方法；这真的是个问题吗？

React Function component method used before it was defined; is it really an issue?

javascript

hoisting

eslint

react-functional-component