Экспортировать класс es6 по умолчанию, встроенный в определение или в конец файла? - PullRequest
Новая
       6

Экспортировать класс es6 по умолчанию, встроенный в определение или в конец файла?

6 голосов
/ 07 февраля 2020

В чем разница между экспортом встроенного класса по умолчанию es6 с его определением и в конце файла после его определения?

Ниже приведены два примера, с которыми я столкнулся в руководствах по React.

Ex. 1: Встроенный в класс 

export default class App extends React.Component {
    // class definition omitted
}

Пример. 2: Конец файла 

class App extends React.Component [
    // class definition omitted
}

export default App; // is this different somehow?

Если нет никакой разницы, то первый пример выглядит более эффективным и лаконичным.

1 Ответ

3 голосов
/ 07 февраля 2020

Единственное существенное отличие состоит в том, что при экспорте чего-либо, кроме объявления класса или именованной функции, объявление выражения и последующий его экспорт позволяет ссылаться на него в другом месте в том же модуле.

Имена классов и (не стрелки, именованные) объявления функций имеют свое имя, помещенное в область видимости модуля как переменная: 

<script type="module">
export default class App {
    // class definition omitted
}
console.log(typeof App);
</script>

<script type="module">
export default function fn() {
    
}
console.log(typeof fn);
</script>

Но это невозможно для других видов выражений, таких как простые объекты или выражения функций стрелок, которые по своей природе не имеют имени, связанного с ними: 

<script type="module">
export default {
  prop: 'val'
  // There's no way to reference the exported object in here
}
// or out here
</script>

<script type="module">
export default () => 'foo';
// There's no way to reference the exported function elsewhere in this module
</script>

Ну, есть один способ вернуть ссылку на него, импортируя текущий модуль, в котором вы находитесь: 

// foo.js
import foo from './foo';
export default () => {
  console.log('foo is', typeof foo);
};

Но это выглядит действительно ужасно и запутанно.

Так что, если вы экспортируете по умолчанию что-то, что не является ни классом, ни объявлением функции, вы не сможете легко ссылаться на то, что вы экспортируете, если вы не поместили его в отдельную переменную перед экспортом.

Имейте в виду, что это не случай для именованного экспорта, который может легко ссылаться по названию их экспорта: 

<script type="module">
export const obj = {
  prop: 'val'
};
console.log(typeof obj);

export const fn = () => 'foo';
console.log(typeof fn);
</script>
...