Kariyerim boyunca React, Angular ve Vue'nun inceliklerini bilen biri olarak, bu popüler ön uç çerçeveleri arasındaki incelikli farklılıkları takdir etmeye başladım. Bu makalede, bir sonraki web uygulaması projeniz için Angular veya Vue'yu tercih etmenin React'a kıyasla neden daha yapılandırılmış ve ölçeklenebilir bir yaklaşım sunabileceğini açıklayacağım. 1. Şablonlar Angular ve Vue'daki şablonlar, mantık ve sunum arasında net bir ayrım sağlayarak daha temiz kod ve daha kolay bakımı teşvik eder. JavaScript mantığının işaretlemeyle React JSX'in aksine, Angular ve Vue şablonları katı bir ayrım uygular. Bunu örneklerle açıklayalım: iç içe geçebildiği JSX'e tepki verin: return ( <div> {array.map(item => { if (condition) { return <p>{item}</p>; } else { return <span>{item}</span>; } })} </div> ); Açısal Şablon: <div *ngFor="let item of array"> <p *ngIf="condition; else other">{{ item }}</p> <ng-template #other><span>{{ item }}</span></ng-template> </div> Vue Şablonu: <div v-for="item in array"> <p v-if="condition">{{ item }}</p> <span v-else>{{ item }}</span> </div> 2. Bağlayıcı Form Kontrolleri: Angular ve Vue, form kontrollerini bağlamak için basit yollar sağlayarak form verilerinin birden fazla alanla yönetilmesini kolaylaştırır. Dört alanlı bir form nesnesi oluşturalım: metin girişi, radyo düğmesi, onay kutusu ve açılır menüyü seçin. Açısal: @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: '', }; } Görünüm: <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> Tepki: 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> ); }; React'ta, Formik veya React Hook Form gibi kütüphaneleri kullanmadan, form durumunu yönetmek, ile durum değişkenlerini ayarlamayı ve form alanları değiştiğinde durumu güncellemek için bir işleyici işlevi yazmayı gerektirir. Bu, özellikle birden fazla alana sahip formlar için ortak kod ekleyebilir ve karmaşıklığı artırabilir. Form kitaplıkları gelişmiş form işleme yetenekleri sunarken bunları bir projeye entegre etmek ek kurulum ve öğrenme gerektirir. useState Bana göre geliştiriciler, özellikle formların işlenmesi ön uç geliştiriciler için tipik bir günlük görev olduğunda, form kitaplıkları için ek belgeleri seçip öğrenmek için zaman harcamak istemeyebilirler. Angular ve Vue'nun yerleşik form işleme yetenekleri, daha basit ve daha entegre bir yaklaşım sunarak geliştiricilerin ek bağımlılığa ihtiyaç duymadan uygulamalarını oluşturmaya odaklanmasına olanak tanır. 3. Alt Bileşenlere Erişim: Angular'ın , Vue'nun refs'i ve React'ın alt bileşenlerle etkileşim kurma mekanizmalarıdır. Her üçü de bunu başarmanın yollarını sunarken, Angular ve Vue, React'in dokümantasyonunda daha az tavsiye edilen React'in kıyasla daha temiz ve daha sezgisel yaklaşımlar sunar. İşte örnekler: ViewChild useImperativeHandle useImperativeHandle Açısal: @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(); } } Görünüm: <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> Tepki: 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> ); }; React'ta, işlevsel bileşen paradigması doğası gereği Angular sınıf bileşenleri veya "methods" özelliğine sahip Vue bileşenleri gibi "yöntemler" sağlamazken, alt yöntemlere kancası olmadan erişmek için daha basit bir yaklaşım arzu edilir. daha az anlaşılır olabilir ve alt bileşenin işlevine sarılmasını gerektirir. Alt bileşenlerin kendisini değiştirmeden alt yöntemlere erişebildiğiniz Angular ve Vue'dan farklı olarak React, benzer işlevsellik elde etmek için bu ek kurulumu gerektirir. useImperativeHandle useImperativeHandle forwardRef Ayrıca Vue'ya da değinmek istiyorum. Composition API, Vue'da nispeten yeni bir teknolojidir ve alt bileşenlere erişim, yukarıda anlattığımdan biraz farklıdır. Ancak tüm ekiplerin henüz Composition API'yi projelerinde uygulamadığını ve anlattığım yaklaşımı kullanmadığını varsayıyorum. Bana göre React yerine Angular veya Vue'yu seçmenizin üç nedenini anlattım.
