Warum Sie für Ihre neue Webanwendung Angular oder Vue statt React wählen sollten

Als jemand, der sich im Laufe meiner Karriere mit den Feinheiten von React, Angular und Vue auseinandergesetzt hat, habe ich die feinen Unterschiede zwischen diesen beliebten Frontend-Frameworks zu schätzen gelernt. In diesem Artikel werde ich darlegen, warum die Entscheidung für Angular oder Vue im Vergleich zu React für Ihr nächstes Webanwendungsprojekt einen strukturierteren und skalierbareren Ansatz bieten könnte.

1. Vorlagen

Vorlagen in Angular und Vue bieten eine klare Trennung zwischen Logik und Präsentation, was saubereren Code und einfachere Wartung ermöglicht. Im Gegensatz zu Reacts JSX, wo JavaScript-Logik mit Markup verflochten werden kann, erzwingen Angular- und Vue-Vorlagen eine strikte Trennung. Lassen Sie uns dies anhand von Beispielen veranschaulichen:

Reagieren Sie mit JSX:

 return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> );

Angular-Vorlage:

 <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div>

Vue-Vorlage:

 <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div>

2. Verbindliche Formularkontrollen:

Angular und Vue bieten unkomplizierte Möglichkeiten zum Binden von Formularsteuerelementen, wodurch die Verwaltung von Formulardaten mit mehreren Feldern vereinfacht wird. Lassen Sie uns ein Formularobjekt mit vier Feldern erstellen: Texteingabe, Optionsfeld, Kontrollkästchen und Dropdown-Auswahl.

Eckig:

 @Component({ selector: 'app-form', template: ` <form> <input type="text" [(ngModel)]="formData.text" placeholder="Text Input"> <br> <input type="radio" [(ngModel)]="formData.radio" value="option1"> Option 1 <input type="radio" [(ngModel)]="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" [(ngModel)]="formData.checkbox"> Checkbox <br> <select [(ngModel)]="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> `, }) export class FormComponent { formData = { text: '', radio: '', checkbox: false, select: '', }; }

Ausblick:

 <template> <form> <input type="text" v-model="formData.text" placeholder="Text Input"> <br> <input type="radio" v-model="formData.radio" value="option1"> Option 1 <input type="radio" v-model="formData.radio" value="option2"> Option 2 <br> <input type="checkbox" v-model="formData.checkbox"> Checkbox <br> <select v-model="formData.select"> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> </template> <script> export default { data() { return { formData: { text: '', radio: '', checkbox: false, select: '', }, }; }, }; </script>

Reagieren:

 const FormComponent = () => { const [formData, setFormData] = useState({ text: '', radio: '', checkbox: false, select: '', }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData({ ...formData, [name]: type === 'checkbox' ? checked : value, }); }; return ( <form> <input type="text" name="text" value={formData.text} onChange={handleChange} placeholder="Text Input" /> <br /> <input type="radio" name="radio" value="option1" checked={formData.radio === 'option1'} onChange={handleChange} /> Option 1 <input type="radio" name="radio" value="option2" checked={formData.radio === 'option2'} onChange={handleChange} /> Option 2 <br /> <input type="checkbox" name="checkbox" checked={formData.checkbox} onChange={handleChange} /> Checkbox <br /> <select name="select" value={formData.select} onChange={handleChange}> <option value="option1">Option 1</option> <option value="option2">Option 2</option> </select> </form> ); };

In React erfordert die Verwaltung des Formularstatus ohne Verwendung von Bibliotheken wie Formik oder React Hook Form das Einrichten von Statusvariablen mit useState und das Schreiben einer Handlerfunktion zum Aktualisieren des Status, wenn sich Formularfelder ändern. Dies kann Boilerplate-Code hinzufügen und die Komplexität erhöhen, insbesondere bei Formularen mit mehreren Feldern. Formularbibliotheken bieten zwar erweiterte Funktionen zur Formularverwaltung, ihre Integration in ein Projekt erfordert jedoch zusätzliche Einrichtung und Einarbeitung.

Meiner Meinung nach möchten Entwickler möglicherweise keine Zeit damit verbringen, zusätzliche Dokumentation für Formularbibliotheken auszuwählen und zu lernen, insbesondere wenn die Handhabung von Formularen eine typische Alltagsaufgabe für Frontend-Entwickler ist. Die integrierten Formularhandhabungsfunktionen von Angular und Vue bieten einen einfacheren und integrierteren Ansatz, sodass sich Entwickler auf die Erstellung ihrer Anwendungen konzentrieren können, ohne dass zusätzliche Abhängigkeiten erforderlich sind.

3. Zugriff auf untergeordnete Komponenten:

Angulars ViewChild , Vues Refs und Reacts useImperativeHandle sind Mechanismen zur Interaktion mit untergeordneten Komponenten. Während alle drei Möglichkeiten bieten, dies zu erreichen, bieten Angular und Vue sauberere und intuitivere Ansätze im Vergleich zu Reacts useImperativeHandle , das in der Dokumentation von React weniger empfohlen wird. Hier sind Beispiele:

Eckig:

 @Component({ selector: 'app-parent', template: ` <app-child #child></app-child> <button (click)="callChildMethod()">Call Child Method</button> `, }) export class ParentComponent { @ViewChild('child') childComponent: ChildComponent; callChildMethod() { this.childComponent.someMethod(); } }

Ausblick:

 <template> <div> <child ref="child"></child> <button @click="callChildMethod">Call Child Method</button> </div> </template> <script> import Child from './Child.vue'; export default { components: { Child, }, methods: { callChildMethod() { this.$refs.child.someMethod(); }, }, }; </script>

Reagieren:

 const ChildComponent = forwardRef((props, ref) => { useImperativeHandle(ref, () => ({ someMethod() { // Method logic }, })); return ( <p>I am a child</p> ); }); const ParentComponent = () => { const childRef = useRef(null); // Access child component's method const callChildMethod = () => { childRef.current?.someMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); };

Während das Paradigma der funktionalen Komponente in React nicht von Natur aus „Methoden“ wie Angular-Klassenkomponenten oder Vue-Komponenten mit der Eigenschaft „Methoden“ bereitstellt, ist ein einfacherer Ansatz für den Zugriff auf untergeordnete Methoden ohne den useImperativeHandle Hook erwünscht. useImperativeHandle kann weniger klar sein und erfordert das Einschließen der untergeordneten Komponente in die Funktion forwardRef . Im Gegensatz zu Angular und Vue, wo Sie auf untergeordnete Methoden zugreifen können, ohne die untergeordnete Komponente selbst zu ändern, erfordert React dieses zusätzliche Setup, um eine ähnliche Funktionalität zu erreichen.

Ich möchte noch etwas zu Vue sagen. Die Composition API ist eine relativ neue Technologie in Vue und der Zugriff auf untergeordnete Komponenten ist etwas anders als oben beschrieben. Ich gehe jedoch davon aus, dass noch nicht alle Teams die Composition API in ihren Projekten implementiert haben und den von mir beschriebenen Ansatz verwenden.

Ich habe drei Gründe beschrieben, warum Sie meiner Meinung nach Angular oder Vue statt React wählen sollten.