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

函数组件、Hooks和类组件区别

article 2024/9/27 9:25:21

1. 函数组件（Function Components）

函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态（state）或生命周期方法，但在React 16.8中引入Hooks之后，这种情况发生了变化。

特点：

声明式地编写。
不需要类，减少了样板代码。
没有this关键字的问题。
在组件渲染时调用，每次组件更新时都会重新调用。

例子：

使用Hooks和函数组件

import React from 'react'
import { withTranslation } from 'react-i18next'
import { Modal } from 'antd'

import SvgIcon from '@/components/SvgIcon'

//考试进行中弹框组件
function ExamOnGoingModal(props) {
  const { t, visible, onOk, onCancel } = props

  return (
    <Modal
      title={
        <>
          <SvgIcon iconClass="icon-jingshidanchuang" color='#007AFF' size="20px" />
          <span style={{ paddingLeft: '16px' }}>{t('examination.examOnGoing')}</span>
        </>
      }
      visible={visible}
      onOk={onOk}
      onCancel={onCancel}
      okText={t('setting.refresh')}
      cancelText={t('common.close')}
    >
      <p>{t('examination.examOnGoingTip')}</p>
    </Modal>
  )
}

export default withTranslation()(ExamOnGoingModal)
//使用 withTranslation() 高阶组件包装 ExamOnGoingModal，以便将 t 函数注入到其 props 中

2. Hooks（Hooks API）

Hooks是React 16.8中引入的一个新特性，允许你在不编写类的情况下使用状态（state）和其他React特性。Hooks只能在函数组件内部使用。

特点：

让你在不编写类的情况下使用状态和其他React特性。
完全可选的。你仍然可以在项目中混合使用类和函数组件。
允许你复用状态逻辑，而无需更改组件结构。

常用Hooks：

useState：在函数组件中添加状态。
useEffect：在函数组件中执行副作用操作（如数据获取、订阅或手动更改React组件中的DOM）。
useContext：让你在函数组件中订阅React的Context。

例子：

...
import { useTranslation } from 'react-i18next';  
     
function ExamOnGoingModal({ visible, onOk, onCancel }) {  
  // 使用useTranslation Hook获取t函数  
  const { t } = useTranslation();  
  
  return (  
    <Modal  
   //同函数组件
    </Modal>  
  );  
}  
  
export default ExamOnGoingModal;  
//这里不再需要withTranslation()来包装组件，因为我们已经直接在组件内部使用了useTranslation Hook

3. 类组件（Class Components）

类组件是通过继承React.Component来创建的React组件。它们有自己的状态（state）和生命周期方法，并且通常比函数组件更复杂。

特点：

可以包含自己的状态（state）和生命周期方法。
适用于更复杂的场景，如需要使用Refs、获取DOM元素、手动调用组件的方法等。
需要this关键字来访问组件的属性和方法。

例子：

class ExamOnGoingModal extends React.Component {
  handleOk = () => {
    this.props.onOk()
  }

  handleCancel = () => {
    this.props.onCancel()
  }

  render() {
    const { t, visible } = this.props
    return (
       <Modal
       ...
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        okText={t('setting.refresh')}
        cancelText={t('common.close')}
     >
       <p>{t('examination.examOnGoingTip')}</p>
     </Modal>
    )
  }
}
export default withTranslation()(ExamOnGoingModal)