济宁市工程建设职业学校网站,企业质量文化建设,福州外贸网站建设,网站怎么做搜索引擎优化1. 函数组件#xff08;Function Components#xff09;
函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态#xff08;state#xff09;或生命周期方法#xff0c;但在React 16.8中引入Hooks之后#xff0c;这种情况发生了变化。
特点Function Components
函数组件是接收props并返回React元素的纯JavaScript函数。它们不能拥有自己的状态state或生命周期方法但在React 16.8中引入Hooks之后这种情况发生了变化。
特点
声明式地编写。不需要类减少了样板代码。没有this关键字的问题。在组件渲染时调用每次组件更新时都会重新调用。
例子 使用Hooks和函数组件
import React from react
import { withTranslation } from react-i18next
import { Modal } from antdimport SvgIcon from /components/SvgIcon//考试进行中弹框组件
function ExamOnGoingModal(props) {const { t, visible, onOk, onCancel } propsreturn (Modaltitle{SvgIcon iconClassicon-jingshidanchuang color#007AFF size20px /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. HooksHooks 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.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)
总结
函数组件简单且易于理解但在引入Hooks之前无法保持状态。Hooks在函数组件中引入状态和其他React特性同时保持代码的简洁性和复用性。类组件功能强大但编写和维护可能更加复杂尤其是在处理this和生命周期方法时。
