Почему вам следует выбрать Angular или Vue вместо React для вашего нового веб-приложения

Как человек, который на протяжении всей своей карьеры разбирался в тонкостях React, Angular и Vue, я начал ценить тонкие различия между этими популярными интерфейсными фреймворками. В этой статье я объясню, почему выбор Angular или Vue может предложить более структурированный и масштабируемый подход по сравнению с React для вашего следующего проекта веб-приложения.

1. Шаблоны

Шаблоны в Angular и Vue предлагают четкое разделение задач между логикой и представлением, что способствует более чистому коду и упрощению обслуживания. В отличие от JSX React, где логика JavaScript может быть переплетена с разметкой, шаблоны Angular и Vue обеспечивают строгое разделение. Проиллюстрируем это примерами:

Реагировать JSX:

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

Угловой шаблон:

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

Шаблон Vue:

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

2. Элементы управления формой привязки:

Angular и Vue предоставляют простые способы привязки элементов управления формой, упрощая управление данными формы с несколькими полями. Давайте создадим объект формы с четырьмя полями: ввод текста, переключатель, флажок и раскрывающийся список выбора.

Угловой:

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

Вю:

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

Реагировать:

 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 без использования таких библиотек, как Formik или React Hook Form, управление состоянием формы требует настройки переменных состояния с помощью useState и написания функции-обработчика для обновления состояния при каждом изменении полей формы. Это может добавить шаблонный код и повысить сложность, особенно для форм с несколькими полями. Хотя библиотеки форм предлагают расширенные возможности обработки форм, их интеграция в проект требует дополнительной настройки и обучения.

На мой взгляд, разработчики могут не захотеть тратить время на выбор и изучение дополнительной документации для библиотек форм, особенно когда обработка форм — типичная повседневная задача для фронтенд-разработчиков. Встроенные возможности обработки форм Angular и Vue предлагают более простой и интегрированный подход, позволяя разработчикам сосредоточиться на создании своих приложений без необходимости использования дополнительных зависимостей.

3. Доступ к дочерним компонентам:

ViewChild в Angular, refs в Vue и useImperativeHandle в React — это механизмы взаимодействия с дочерними компонентами. Хотя все три предоставляют способы достижения этой цели, Angular и Vue предлагают более чистые и интуитивные подходы по сравнению с useImperativeHandle из React, который менее рекомендуется в документации React. Вот примеры:

Угловой:

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

Вю:

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

Реагировать:

 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, хотя парадигма функциональных компонентов по своей сути не предоставляет «методы», такие как компоненты класса Angular или компоненты Vue со свойством «методы», желателен более простой подход для доступа к дочерним методам без перехватчика useImperativeHandle . useImperativeHandle может быть менее понятным и требует обертывания дочернего компонента в функцию forwardRef . В отличие от Angular и Vue, где вы можете получить доступ к дочерним методам, не изменяя сам дочерний компонент, React требует этой дополнительной настройки для достижения аналогичной функциональности.

Еще хочу отметить по поводу Vue. API композиции — относительно новая технология во Vue, и доступ к дочерним компонентам немного отличается от того, что я описал выше. Но я предполагаю, что не все команды еще реализовали Composition API в своих проектах и используют тот подход, который я описал.

Я описал три причины, по которым, по моему мнению, вам следует выбрать Angular или Vue вместо React.