在我的职业生涯中，我曾对 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 的  、Vue 的 refs 和 React 的 是与子组件交互的机制。虽然这三种机制都提供了实现此目的的方法，但与 React 的 相比，Angular 和 Vue 提供了更简洁、更直观的方法，而 React 的文档不太推荐使用后者。以下是示例： ViewChild useImperativeHandle useImperativeHandle 角度：   @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 组件那样提供“方法”，但需要一种更简单的方法来访问子方法，而无需 钩子。  可能不太清晰，并且需要将子组件包装在 函数中。与 Angular 和 Vue 不同，您可以在不改变子组件本身的情况下访问子方法，而 React 需要这种额外的设置来实现类似的功能。 useImperativeHandle useImperativeHandle forwardRef 我还想谈谈 Vue。Composition API 是 Vue 中一项相对较新的技术，对子组件的访问与我上面描述的略有不同。但我认为并非所有团队都已在其项目中实施 Composition API 并使用我描述的方法。 我已经描述了三个我认为你应该选择 Angular 或 Vue 而不是 React 的原因。

The is an opinion piece based on the author’s POV and does not necessarily reflect the views of HackerNoon.

Read My Stories

該音頻是用故事的原始語言製作的！

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

About Author

註釋

標籤

这篇文章刊登在

Related Stories

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

扬帆起航：利用数据湖开发生产级 RAG 应用程序

看不见的层面：为什么用户访谈是不可替代的资产

想赢得 HackerNoon 写作比赛吗？以下是 #crypto-api 比赛获奖者的推荐

Floki 的 Valhalla 成为印度环斯里兰卡赛事联合赞助商

扬帆起航：利用数据湖开发生产级 RAG 应用程序

看不见的层面：为什么用户访谈是不可替代的资产

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps