Блог

Есть ли какое-либо снижение производительности, нежелательные побочные эффекты или предпочтительный стандарт при экспорте анонимного компонента React по сравнению с именованным компонентом?

анонимный экспорт компонентов

 import React from 'react';

export default ({ title }) => <div>{title}</div>;
 

экспорт именованного компонента

 import React from 'react';

const MyComponent = ({ title }) => <div>{title}</div>;

export default MyComponent;
 

Это не влияет на производительность, но именование обеспечивает лучшую читаемость и функциональность вашего редактора

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

Я не согласен с вышесказанным.

Предпочтительнее использовать IntelliSense и / или TypeScript export default MyComponent , поскольку это сообщает Intellisense и TypeScript больше и позволяет автоматически импортировать ваш модуль с использованием расширений в вашей IDE. Если нет снижения производительности, то именованный экспорт является лучшим синтаксисом.

Если вы напишете «экспорт по умолчанию () => { … }» чтобы объявить компоненты, они:

• будет отображаться как анонимный в трассировках стека
• будет отображаться как неизвестный в DevTools
• не будет проверяться специфичными для React правилами lint
• не будет работать с некоторыми функциями, такими как быстрое обновление

https://twitter.com/dan_abramov/status/1255229440860262400

Снижения производительности нет, поскольку экспорт по умолчанию фактически именуется во время импорта, т.е.: import MyFancyNamedComponent from './MyComponent'

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