为什么你应该为你的新 Web 应用程序选择 Angular 或 Vue 而不是 React

在我的职业生涯中，我曾对 React、Angular 和 Vue 的复杂性了如指掌，因此我开始欣赏这些流行前端框架之间的细微差别。在本文中，我将概述为什么对于您的下一个 Web 应用程序项目，与 React 相比，选择 Angular 或 Vue 可能会提供更结构化和可扩展的方法。

1. 模板

Angular 和 Vue 中的模板将逻辑和表示之间的关注点清晰地分离，从而促进代码更简洁、维护更轻松。与 React 的 JSX（其中 JavaScript 逻辑可以与标记交织在一起）不同，Angular 和 Vue 模板强制执行严格的分离。让我们通过示例来说明这一点：

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

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>

反应：

 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.访问子组件：

Angular 的ViewChild 、Vue 的 refs 和 React 的useImperativeHandle是与子组件交互的机制。虽然这三种机制都提供了实现此目的的方法，但与 React 的useImperativeHandle相比，Angular 和 Vue 提供了更简洁、更直观的方法，而 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(); } }

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>

反应：

 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 类组件或具有“methods”属性的 Vue 组件那样提供“方法”，但需要一种更简单的方法来访问子方法，而无需useImperativeHandle钩子。 useImperativeHandle可能不太清晰，并且需要将子组件包装在forwardRef函数中。与 Angular 和 Vue 不同，您可以在不改变子组件本身的情况下访问子方法，而 React 需要这种额外的设置来实现类似的功能。

我还想谈谈 Vue。Composition API 是 Vue 中一项相对较新的技术，对子组件的访问与我上面描述的略有不同。但我认为并非所有团队都已在其项目中实施 Composition API 并使用我描述的方法。

我已经描述了三个我认为你应该选择 Angular 或 Vue 而不是 React 的原因。