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

芋圆不想圆

已于 2023-09-07 17:32:11 修改

阅读量1.4k

点赞数

文章标签： react.js javascript 前端

于 2023-09-07 17:27:55 首次发布

本文链接：https://blog.csdn.net/m0_52900946/article/details/132742604

版权

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/>
    )
  }
}