当前位置：首页 > news >正文

React中的类组件和函数组件（详解）

news 2025/8/16 14:43:02

React的核心思想就是组件化，相对于Vue来说，React的组件化更加灵活和多样。主要可以分为两大类：函数组件，类组件，这两大类组件的名称必须是大写字母开头

一、函数组件

函数组件通常是function进行定义的函数，这个函数会返回和类组件中render函数返回一样的内容
函数组件的特点：

没有生命周期，会被更新并挂载，但是没有生命周期函数
没有this（组件实例）
没有内部状态（state）

函数组件的代码相对来说是简洁的，专注于render，且组件不需要实例化，整体渲染得到了提升，并且视图和数据解耦分离，输出只取决于输入
因为没有state ，只能通过props获取属性内容并实现组件的更新，无生命周期

import React from 'react'export default function App(){render(){return (<div>Hello World!<div/>)}
}

注意：
当render被调用的时候，会返回以下类型之一（同时还会检查this.props,this.state ）

React 元素：
数组或者Fragments：
使render方法可以返回多个元素
Portals：
可以渲染子节点到不同的DOM子树上
字符串或数值类型：
在DOM中会被渲染为文本节点
布尔类型或者 null：
什么都不渲染

二、类组件

类组件的定义有两点要求，第一是需要继承自React.Component，第二是必须实现render函数
定义类组件的步骤：

constructor是可以选择的，通常需要在这里初始化一些数据
this.state中维护的就是我们组件内部的数据
render方法是class组件中唯一必须实现的方法

// index.js
import React from 'react'
import ReactDom from 'react-dom'import App from 'App.js'ReactDOM.render(<App />,document.getElementById('root'))// App.js
import React,{Component} from 'react' 
export default class App extends Component {render(){return(<div>Hello World<div/>)}
}