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

编程问答 2022-04-30

问题描述

我遇到了这段代码，但我不明白为什么在声明之前可以在函数组件中使用 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 定义的变量被提升到块的顶部，但没有被初始化。）

错误：未捕获的引用错误：初始化前无法访问“a”

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

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

解决方法

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

此外，使用通过“var”声明的变量时有一个例外。然后所有的声明都被移动到当前作用域的顶部并被初始化。您可以阅读有关提升 here

的更多信息
hoistingjavascriptreactjsreactjsreactjsreactjs