在 React 中，有两种主要的组件类型：函数组件和类组件。类组件是在 React 最开始就有的，而函数组件则是在后来引入的。
自 React 的早期版本开始，主要的组件类型是类组件。类组件是通过继承 React.Component 类创建的，它提供了生命周期方法和内部状态的管理机制，使得开发者可以更好地控制组件的行为和状态变化。在类组件中，通过重写生命周期方法，可以在不同的阶段执行特定的逻辑操作，例如在组件挂载到 DOM 后调用 componentDidMount 方法，或在组件更新后调用 componentDidUpdate 方法。
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log('Component mounted');
}
incrementCount() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={() => this.incrementCount()}>Increment</button>
</div>
);
}
}
export default Counter;
然而，随着 React 的发展和社区的需求，人们逐渐发现类组件在某些场景下存在一些不足之处。类组件在书写上较为冗长，对于简单的组件而言，定义一个类并继承 React.Component 似乎有些繁琐。同时，类组件在共享状态逻辑和处理副作用等方面也存在一些复杂性。为了解决这些问题，React 团队在 16.8 版本中引入了 Hooks，从而使函数组件能够具备类似类组件的能力。
import React from 'react';
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
export default Greeting;
主要区别
| 特点 | 函数组件 | 类组件 |
|---|---|---|
| 类型 | 纯 JavaScript 函数 | ES6 类的实例，继承自 React.Component |
| 生命周期方法 | 没有生命周期方法 | 有生命周期方法，如 componentDidMount、componentDidUpdate |
| 状态管理 | 没有内部状态（state），通过外部状态管理方案如 Redux 实现状态管理 | 有内部状态（state），通过 this.state 存储和访问 |
| 状态和副作用管理 | 使用 Hooks（如 useState、useEffect、useRef）来管理状态和执行副作用 | 可以在生命周期方法中处理状态和副作用 |
| 关键字 this | 没有 this 关键字，无法在函数内部使用 this | 可以使用 this 关键字访问组件的属性、状态和方法 |
随着 React Hooks 的引入，函数组件在功能和灵活性方面得到了增强，并且在性能方面优于类组件。目前 React 虽然仍支持类组件，但不建议在新代码中使用它们。
React 函数组件优势：
-
简洁性：
- 函数组件更简洁，写起来更简单明了，只需定义一个函数并返回 JSX 元素。
- 类组件需要定义一个类，扩展
React.Component并实现render()方法。
-
性能优化：
- 函数组件相比类组件具有更好的性能。
- React 的 Hooks 特性使函数组件能够管理状态和副作用，消除了复杂的生命周期方法，提高了性能。
-
可读性和可维护性：
- 函数组件更易于阅读和维护，代码量较少，不需要关注类的继承和方法的绑定，使得组件的代码更加清晰。
总结：
- 函数组件适用于简单的展示型组件，更轻量级和简洁。
- 类组件适用于复杂的逻辑和交互，有更丰富的功能。
- 函数组件与 Hooks 的结合弥补了函数组件的不足，使其功能更加丰富，性能优化依然有效。
- 在新项目中，React 鼓励优先选择函数组件，并在必要时使用 Hooks 进行状态管理和副作用处理。
以下是一些相关链接供进一步了解：
