Best Practice React Funktion exportieren?

Es gibt soweit ich weiß drei Möglichkeiten.

Als normale Funktion exportieren:

export const test = ()=> {
  return (
    <div>Test</div>
  )
}

Als Arrow-Funktion default exportieren:

export function test() {
  return (
    <div>Test</div>
  )
} 

oder so am Ende von der Datei mit default, wenn man nichts anderes mehr exportieren will.

function test() {
  return (
    <div>Test</div>
  )
}
  
export default test;

Mit default und ohne default unterscheidet sich dann ja auch die Import-Art.

Bei den ersten beiden:

import { test } from ""…

Beim letzten kann man es nennen wie man will, aber nur diese Funktion

import TestComponent from ""

Welche von den drei ist am effizientesten?

Ich habe irgendwie gehört, das import { } mehr Speicher verbraucht, aber weiß nicht mehr, warum.

Kann ich guten Gewissens alles mit Arrow-Funktionen machen oder je nach Datei unterscheiden? Es ist nicht schön, wenn es gemischt wird.

Answer 1

[regex9]

Man kann sich für eine Unterscheidung am Zweck orientieren.

Wenn du mehrere Elemente eines Moduls exportieren möchtest, verwende benannte Exports (ohne default). Wenn nur ein Element exportiert werden soll, kannst du es mit default kennzeichnen (unbenannter Export). Oft macht man das für Elemente, die für das Modul besonders im Fokus stehen (Beispiel: die Komponente, die im Modul beschrieben wird).

Gegenüber benannten Exports haben unbenannte Exports definitiv ein paar Nachteile:

1) Durch Inkonsistenzen können sie für eine schlechtere Codelesbarkeit/-verwaltung sorgen. In Datei A könntest du eine Funktion ja unter dem Namen XY importieren und in Datei B wiederum unter dem Namen YZ. Wenn man nicht wenigstens eine Konvention einhält, stiftet das Verwirrung.

2) Jedes Modul kann nur einen unbenannten Export haben. Sollte dein Modul weitere öffentliche Schnittstellen erhalten, die als gleichwertig zur bereits bestehenden Schnittstellenfunktion betrachtet werden sollen, hättest du eine Inkonsistenz, die Refactoring erfordert.

3) Beim Bundling kann kein tree shaking verwendet werden. Damit ist ein Verfahren gemeint, beim Bundling unnötigen Code aufzuspüren und zu entfernen.

Bezüglich der Schreibweise:

export function doSomething() {
}

export function doSomethingElse() {
}

oder:

function doSomething() {
}

function doSomethingElse() {
}

export { doSomething, doSomethingElse };

gibt es keinen sonderlichen Unterschied. Das kannst du so halten, wie du es am übersichtlichsten findest.

kann ich guten gewissens alles mit arrow funktions machen (...)

Sofern du berücksichtigst, dass es zwischen normalen Funktionen und Arrow-Funktionen wesentliche Unterschiede im Verhalten gibt, ja.

• Normale Funktionen können verwendet werden, um neue Prototypen zu definieren, von denen sich Ableger instanzieren lassen (die sich dasselbe Prototypobjekt teilen). Mit this beziehen sie sich auf ihren eigenen Kontext, via arguments können alle übergebenen Argumente angefordert werden.
• Arrow-Funktionen beziehen sich bei Schlüsselwörtern wie arguments oder this nicht auf einen inneren Ausführungskontext, sondern auf den, in dem sie aufgerufen werden.
• Um eine Referenz auf die Funktion zu erhalten, reicht bei Funktionen der Name. Bei Arrow-Funktionen brauchst du eine Variable.
• Hoisting wirkt bei Funktionsdeklarationen, aber nicht bei Funktionsausdrücken:

doSomething(); // "Hello"
doSomethingElse(); // error

function doSomething() {
  console.log("Hello");
}

const doSomethingElse = () => console.log("Hello");