React“组件即函数”
一、“组件即函数” 的核心内涵
React组件是构建 UI 的基本单位，而 函数组件 是用 Javascript函数 来定义的组件。这个组件接受 props （即组件的输入），并返回一个描述UI的 JSX 结构。函数组件的特点是简洁、声明式且功能明确。React采用这种设计理念是为了使开发者能够以更简单的方式定义UI元素，并实现可复用、可组合的界面组件。
函数组件的特点：
- 简洁性：函数组件通常只有一个函数声明，没有额外的生命周期方法、tis关键字等复杂概念
- 声明式编程：函数组件是声明式的，它通过返回JSX来描述渲染的内容，React会根据状态变化自动重新渲染组件
- 无副作用的渲染：函数组件本身是纯函数，即对于相同的输入（props和state)，它总是返回相同的输出(UI)，没有副作用
在编程中，纯函数是函数式编程的核心概念，它需满足两个关键条件：
- 相同输入，必然返回相同输出（确定性）
- 执行过程中不产生 “副作用”（如修改全局变量、操作 DOM、发起网络请求等）
二、类组件
在函数组件之前，React组件是通过ES6类来定义的，这种方式被称为类组件。类组件具有更复杂的结构，允许开发者在其中定义生命周期方法、管理状态，并使用 this 关键字来访问组件的实例
类组件的特点：
- 使用类语法：类组件是使用ES6类语法定义的，需要继承 React.Component 或React.PureComponent ，并且每个类组件必须有一个render()方法来返回JSX。
- 生命周期方法：类组件有生命周期方法，如 componentDidMount、shouldComponentUpdate、componentwillUnmount等，用于在组件不同的生命周期阶段执行特定操作。
- 状态管理：类组件通过 this.state 来定义组件的内部状态，通过 this.setstate 来更新状态。
- this关键字：在类组件中，this关键字 用于访问组件的实例及其方法和属性。
三、函数组件与类组件的本质区别
- 编程范式：函数组件是函数式编程，聚焦 “输入输出”；类组件是面向对象编程，依赖
React.Component继承，用实例方法管理逻辑。 - 复用机制：函数组件靠自定义 Hook（如
useForm）轻量化抽离逻辑；类组件依赖高阶组件（HOC），易有嵌套冗余。 - 生命周期 / 副作用：函数组件无内置生命周期，用
useEffect拆分副作用；类组件靠componentDidMount等生命周期方法集中管理，逻辑易耦合。 - 状态管理：函数组件用
useState/useReducer细粒度管理状态，逻辑可复用；类组件靠this.state/this.setState，状态与实例强绑定
对比 “粗粒度管理”（把所有状态塞进一个对象，比如
const [form, setForm] = useState({ username: '', password: '' })），细粒度是「一个状态对应一个独立的管理单元」—— 每个状态只负责一件事，更新时不影响其他无关状态。