JavaScript 模块系统和 React 组件

Question

考虑以下简单的 React 应用程序组件，它位于自己的文件 App.js 中，并且应用程序组件功能默认导出，然后导入到 main.js 文件中。我的问题是，为什么 App 函数之外的代码会在此文件中执行，即导入或 console.log('outside function')。当我们在main.js中引用这个组件时，不应该只执行函数代码吗？

import Alexa from './alexa.png';
import Siri from './siri.png';
import Cortana from './cortana.png';

console.log(Siri);
console.log(Alexa);
console.log(Cortana);

export default function App() {
  return (
    <div>
      <h1>Hello, React world!!!</h1>
      <img src={Alexa} alt='' />
      <img src={Siri} alt='' />
      <img src={Cortana} alt='' />
    </div>
  )
}

Answer 1

当您导入文件时（在 Node.js 中使用

require

同样如此），该文件的所有顶级语句都会被评估：

import React from 'react';

console.log('I will print');
fetch('some-url')
  .then(resp => resp.json())
  .then(json => console.log('I will print the fetched JSON data', json));

const Foo = () => <p>Hello World!</p>;
export default Foo;

这就是 Javascript（以及几乎所有其他编程语言）的工作原理。

如果你想一想，它实际上has是这样的：如果不是这样，那么如果赋值语句没有被评估，那么如何定义

Foo

以便导出？