Tại sao bạn nên chọn Angular hoặc Vue thay vì React cho ứng dụng web mới của mình

Là người đã điều hướng sự phức tạp của React, Angular và Vue trong suốt sự nghiệp của mình, tôi đánh giá cao sự khác biệt về sắc thái giữa các khung giao diện người dùng phổ biến này. Trong bài viết này, tôi sẽ nêu lý do tại sao việc chọn Angular hoặc Vue có thể mang lại cách tiếp cận có cấu trúc và khả năng mở rộng hơn so với React cho dự án ứng dụng web tiếp theo của bạn.

1. Mẫu

Các mẫu trong Angular và Vue cung cấp sự phân tách rõ ràng mối quan tâm giữa logic và cách trình bày, giúp thúc đẩy mã sạch hơn và bảo trì dễ dàng hơn. Không giống như JSX của React, nơi logic JavaScript có thể được đan xen với đánh dấu, các mẫu Angular và Vue thực thi sự phân tách nghiêm ngặt. Hãy minh họa điều này bằng các ví dụ:

Phản ứng JSX:

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

Mẫu góc:

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

Mẫu Vue:

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

2. Kiểm soát biểu mẫu ràng buộc:

Angular và Vue cung cấp những cách đơn giản để liên kết các điều khiển biểu mẫu, giúp dễ dàng quản lý dữ liệu biểu mẫu với nhiều trường. Hãy tạo một đối tượng biểu mẫu với bốn trường: nhập văn bản, nút radio, hộp kiểm và thả xuống chọn.

Góc cạnh:

 @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: '', }; }

Vue:

 <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>

Phản ứng:

 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> ); };

Trong React, không sử dụng các thư viện như Formik hoặc React Hook Form, việc quản lý trạng thái biểu mẫu yêu cầu thiết lập các biến trạng thái với useState và viết hàm xử lý để cập nhật trạng thái bất cứ khi nào trường biểu mẫu thay đổi. Điều này có thể thêm mã soạn sẵn và tăng độ phức tạp, đặc biệt đối với các biểu mẫu có nhiều trường. Mặc dù thư viện biểu mẫu cung cấp khả năng xử lý biểu mẫu nâng cao nhưng việc tích hợp chúng vào dự án đòi hỏi phải thiết lập và tìm hiểu thêm.

Theo tôi, các nhà phát triển có thể không muốn mất thời gian lựa chọn và tìm hiểu tài liệu bổ sung cho thư viện biểu mẫu, đặc biệt khi việc xử lý biểu mẫu là công việc điển hình hàng ngày của các nhà phát triển giao diện người dùng. Khả năng xử lý biểu mẫu tích hợp của Angular và Vue mang lại cách tiếp cận đơn giản và tích hợp hơn, cho phép các nhà phát triển tập trung vào việc xây dựng ứng dụng của họ mà không cần phụ thuộc thêm.

3. Truy cập các thành phần con:

ViewChild của Angular, ref của Vue và useImperativeHandle của React là các cơ chế để tương tác với các thành phần con. Mặc dù cả ba đều cung cấp các cách để đạt được điều này, Angular và Vue cung cấp các cách tiếp cận rõ ràng và trực quan hơn so với useImperativeHandle của React, điều này ít được tài liệu của React khuyến nghị hơn. Dưới đây là ví dụ:

Góc cạnh:

 @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(); } }

Vue:

 <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>

Phản ứng:

 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> ); };

Trong React, mặc dù mô hình thành phần chức năng vốn không cung cấp các "phương thức" như các thành phần lớp Angular hoặc các thành phần Vue với thuộc tính "phương thức", nhưng mong muốn có một cách tiếp cận đơn giản hơn để truy cập các phương thức con mà không cần hook useImperativeHandle . useImperativeHandle có thể kém rõ ràng hơn và nó yêu cầu gói thành phần con trong hàm forwardRef . Không giống như Angular và Vue, nơi bạn có thể truy cập các phương thức con mà không cần thay đổi chính thành phần con, React yêu cầu thiết lập bổ sung này để đạt được chức năng tương tự.

Tôi cũng muốn lưu ý về Vue. Composition API là một công nghệ tương đối mới trong Vue và khả năng truy cập vào các thành phần con hơi khác một chút so với những gì tôi mô tả ở trên. Nhưng tôi cho rằng không phải tất cả các nhóm đều chưa triển khai Composition API trong dự án của họ và sử dụng phương pháp mà tôi đã mô tả.

Tôi đã mô tả ba lý do tại sao theo tôi, bạn nên chọn Angular hoặc Vue thay vì React.