ReactJS 中的功能组件与类组件

功能组件或无状态组件是使用 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 钩子作为传统 React 生命周期方法的更好的替代方案而存在。
有更多的代码，因此可读性较低。有较少的代码，因此可读性更高。


更新于:2021 年 3 月 18 日

2K+ 浏览

开启你的 职业

完成课程获得认证

开始
广告