ReactJS 中的函数式组件 vs. 类组件
reactjsweb developmentfront end technology更新于 2026/1/26 14:07:17
函数式组件或无状态组件是最广泛使用的组件类型，其基本语法是 JavaScript 函数，返回 JSX 代码或 HTML 代码。
它们被称为无状态组件，因为它们接受数据并相应地显示，主要负责 UI 的渲染。
示例
import React from ‘react’;
const App=()=>{
return (
<div>
<h1>TutorialsPoint</h1>
</div>
)
}
export default App
输出
基于类的或有状态组件是扩展 React 库组件类的 ES6 类。它们被称为有状态组件，因为它们负责逻辑的实现。它包含 React 生命周期的不同阶段，包括渲染、挂载、更新和卸载阶段。
示例
import React from 'react';
class App extends React.Component{
render() {
return (
<div>
<h1>TutorialsPoint</h1>
</div>
)
}
}
export default App
输出
函数式组件和基于类的组件的区别
| 基于类的组件 | 函数式组件 |
|---|---|
| 它必须有一个 render() 方法。 | 它没有 render() 方法方法。 |
| 使用了 React 生命周期方法(例如 componentDidMount 等)。 | React hooks 是传统 React 生命周期方法的更好替代方案。 |
| 它包含更多代码，因此可读性较差。 | 它包含更少代码，因此可读性更强。 |
