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

devtools/2024/10/18 18:25:48/

1. 函数组件（Function Components）

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

特点：

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

例子：

使用Hooks和函数组件

javascript">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 } = propsreturn (<Modaltitle={<><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。

例子：

javascript">...
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关键字来访问组件的属性和方法。

例子：

javascript">class ExamOnGoingModal extends React.Component {handleOk = () => {this.props.onOk()}handleCancel = () => {this.props.onCancel()}render() {const { t, visible } = this.propsreturn (<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)