在声明之前在函数组件内使用全局 const 变量答案

【问题标题】：Using a global const variable inside a function component before its declaration在声明之前在函数组件内使用全局 const 变量
【发布时间】：2021-05-21 17:19:04
【问题描述】：

我遇到了这段代码，但我不明白为什么在声明之前可以在函数组件内部使用 const 变量 myList。

  export default function ListComponent(props) {
    const listItems = myList.map((item) => <li>{item}</li>);
   return <ul>{listItems}</ul>;
}
const myList = ["apple", "orange", "strawberry", "blueberry", "avocado"];

但以下代码会引发错误。这是因为 let 或 const 变量在声明之前不能使用（用 let 和 const 定义的变量被提升到块的顶部，但没有初始化。）。

错误：未捕获的 ReferenceError：在初始化之前无法访问“a”

const b=2;
 function test() {
  console.log(a);
  console.log(b);
}
test();
const a=1;

谁能解释第一个代码是如何工作的？提前致谢！

【问题讨论】：

您没有显示如何/何时调用ListComponent()，但是，这似乎是一个导出函数。当文件被导入/需要时，myList 被初始化，然后，ListComponent() 被调用。在您的示例中，您在 a 的声明之前和同一文件中调用 test()。

标签： javascript reactjs hoisting

【解决方案1】：

ListComponent 在 myList 初始化之后运行，因为您在导出中使用它并且声明发生在函数被调用之前。

此外，使用通过“var”声明的变量时也会出现异常。然后所有声明都被移动到当前作用域的顶部并被初始化。你可以阅读更多关于提升here

【讨论】：

非常感谢。