在React、Vue和Angular这三个主要的前端框架中，组件化是一种重要的开发概念，它使得前端开发更加模块化、可维护和可重用。
React 中的组件化：
在React中，组件是构建用户界面的基本单元。一个React应用通常由多个嵌套的组件组成，每个组件都是独立的、可复用的代码单元。组件可以是无状态的（Functional Components）或有状态的（Class Components）。
// 无状态组件
const Welcome = (props) => {
return <h1>Hello, {props.name}</h1>;
}
// 有状态组件
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Increment
</button>
</div>
);
}
}
Vue 中的组件化：
在Vue中，组件同样是构建用户界面的基本单元。Vue组件可以包含模板、脚本和样式，使得每个组件都是一个独立的、可复用的单元。
<!-- 模板 -->
<template>
<h1>Hello, {
{ name }}</h1>
</template>
<!-- 脚本 -->
<script>
export default {
data() {
return {
name: 'World'
};
}
}
</script>
<!-- 样式 -->
<style scoped>
h1 {
color: blue;
}
</style>
Angular 中的组件化：
在Angular中，组件也是构建用户界面的基本单元。Angular组件由类、模板和元数据组成，使得每个组件都是一个独立、可测试和可维护的单元。
// 组件类
import {
Component } from '@angular/core';
@Component({
selector: 'app-greet',
template: '<h1>Hello, {
{ name }}</h1>',
})
export class GreetComponent {
name = 'Angular';
}
在这三个框架中，组件化的概念都有共通之处，即通过将用户界面划分为独立的组件，实现了模块化开发、代码复用和更容易维护的目标。组件之间可以通过 props/props、事件或服务进行通信，形成一个组件树，从而构建复杂的用户界面。
