重新测试deepseek Jakarta EE 10编程能力
听说deepseek做了一个小更新,我重新测试了一下Jakarta EE 10编程能力;有点进步,遗漏的功能比以前少了。
采用Jakarta EE 10 编写员工信息表维护表,包括员工查询与搜索、员工列表、新增员工、删除员工,修改员工,要求用户界面主要采用JAVA SERVER FACE,如果用户界面采用JAVA SERVER FACE实现不了,增加JS完成实现不了的功能,业务逻辑采用EJB,数据库访问采用JPA. 员工信息表包含 员工编号,姓名,部门,手机号码。
下面是一个完整的Jakarta EE 10员工信息管理系统实现方案,严格遵循您的要求:JSF作为主要UI框架、EJB处理业务逻辑、JPA进行数据访问,并在需要时使用JavaScript增强功能。
解决方案架构
复制
下载
src ├── main │ ├── java │ │ └── com │ │ └── example │ │ ├── ejb │ │ │ └── EmployeeService.java # EJB服务 │ │ ├── entity │ │ │ └── Employee.java # JPA实体 │ │ ├── managed │ │ │ └── EmployeeBean.java # JSF托管Bean │ │ └── util │ │ └── JsfUtil.java # JSF工具类 │ ├── resources │ │ └── META-INF │ │ └── persistence.xml # JPA配置 │ └── webapp │ ├── WEB-INF │ │ └── templates │ │ └── template.xhtml # 页面模板 │ ├── employee │ │ ├── list.xhtml # 员工列表 │ │ ├── edit.xhtml # 编辑页面 │ │ └── search.xhtml # 搜索页面 │ └── resources │ └── js │ └── main.js # JavaScript增强
1. JPA实体类 (Employee.java)
java
复制
下载
package com.example.entity;import jakarta.persistence.*; import java.io.Serializable;@Entity @Table(name = "employee") @NamedQuery(name = "Employee.findAll", query = "SELECT e FROM Employee e") public class Employee implements Serializable {private static final long serialVersionUID = 1L;@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Long id;@Column(name = "emp_number", unique = true, nullable = false)private String employeeNumber;@Column(nullable = false)private String name;private String department;@Column(name = "phone")private String phoneNumber;// 省略getter/setter }
2. EJB服务层 (EmployeeService.java)
java
复制
下载
package com.example.ejb;import com.example.entity.Employee; import jakarta.ejb.Stateless; import jakarta.persistence.EntityManager; import jakarta.persistence.PersistenceContext; import jakarta.persistence.TypedQuery; import java.util.List;@Stateless public class EmployeeService {@PersistenceContext(unitName = "employeePU")private EntityManager em;public void create(Employee employee) {em.persist(employee);}public void update(Employee employee) {em.merge(employee);}public void delete(Long id) {Employee emp = em.find(Employee.class, id);if (emp != null) {em.remove(emp);}}public List<Employee> findAll() {return em.createNamedQuery("Employee.findAll", Employee.class).getResultList();}public List<Employee> search(String keyword) {String jpql = "SELECT e FROM Employee e WHERE " +"LOWER(e.name) LIKE :keyword OR " +"LOWER(e.department) LIKE :keyword OR " +"e.phoneNumber LIKE :keyword OR " +"e.employeeNumber LIKE :keyword";return em.createQuery(jpql, Employee.class).setParameter("keyword", "%" + keyword.toLowerCase() + "%").getResultList();}public Employee findById(Long id) {return em.find(Employee.class, id);} }
3. JSF托管Bean (EmployeeBean.java)
java
复制
下载
package com.example.managed;import com.example.ejb.EmployeeService; import com.example.entity.Employee; import jakarta.faces.view.ViewScoped; import jakarta.inject.Inject; import jakarta.inject.Named; import java.io.Serializable; import java.util.List;@Named @ViewScoped public class EmployeeBean implements Serializable {private Employee employee = new Employee();private List<Employee> employees;private String searchKeyword;@Injectprivate EmployeeService employeeService;public void init() {employees = employeeService.findAll();}public void search() {employees = employeeService.search(searchKeyword);}public String save() {if (employee.getId() == null) {employeeService.create(employee);} else {employeeService.update(employee);}return "/employee/list?faces-redirect=true";}public void delete(Long id) {employeeService.delete(id);employees = employeeService.findAll();}public void prepareEdit(Long id) {employee = employeeService.findById(id);}// 省略getter/setter }
4. JSF工具类 (JsfUtil.java)
java
复制
下载
package com.example.util;import jakarta.faces.application.FacesMessage; import jakarta.faces.context.FacesContext;public class JsfUtil {public static void addErrorMessage(String msg) {FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, msg, null));}public static void addSuccessMessage(String msg) {FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, msg, null));} }
5. JPA配置 (persistence.xml)
xml
复制
下载
运行
<?xml version="1.0" encoding="UTF-8"?> <persistence version="3.0" xmlns="http://jakarta.ee/xml/ns/persistence"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://jakarta.ee/xml/ns/persistencehttp://jakarta.ee/xml/ns/persistence/persistence_3_0.xsd"><persistence-unit name="employeePU" transaction-type="JTA"><jta-data-source>java:global/jdbc/EmployeeDS</jta-data-source><class>com.example.entity.Employee</class><properties><property name="jakarta.persistence.schema-generation.database.action" value="drop-and-create"/><property name="jakarta.persistence.sql-load-script-source"value="/META-INF/sql/data.sql"/></properties></persistence-unit> </persistence>
6. 页面模板 (template.xhtml)
xhtml
复制
下载
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:f="http://xmlns.jcp.org/jsf/core"xmlns:ui="http://xmlns.jcp.org/jsf/facelets"> <h:head><title>员工管理系统</title><h:outputStylesheet name="css/style.css"/><h:outputScript name="js/main.js" target="body"/> </h:head> <h:body><div class="container"><header><h1>员工信息管理系统</h1><nav><h:link outcome="/employee/list" value="员工列表"/><h:link outcome="/employee/search" value="员工搜索"/><h:link outcome="/employee/edit" value="新增员工"><f:param name="id" value="#{null}"/></h:link></nav></header><ui:insert name="content">默认内容</ui:insert><footer><p>© 2023 员工管理系统 - Jakarta EE 10</p></footer></div> </h:body> </html>
7. 员工列表页面 (list.xhtml)
xhtml
复制
下载
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://xmlns.jcp.org/jsf/facelets"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:f="http://xmlns.jcp.org/jsf/core"template="/WEB-INF/templates/template.xhtml"><ui:define name="content"><h2>员工列表</h2><h:form id="listForm"><h:dataTable value="#{employeeBean.employees}" var="emp" styleClass="emp-table" rowClasses="odd-row,even-row"><h:column><f:facet name="header">#</f:facet>#{emp.id}</h:column><h:column><f:facet name="header">员工编号</f:facet>#{emp.employeeNumber}</h:column><h:column><f:facet name="header">姓名</f:facet>#{emp.name}</h:column><h:column><f:facet name="header">部门</f:facet>#{emp.department}</h:column><h:column><f:facet name="header">手机号码</f:facet>#{emp.phoneNumber}</h:column><h:column><f:facet name="header">操作</f:facet><h:link outcome="/employee/edit" value="编辑"><f:param name="id" value="#{emp.id}"/></h:link><h:commandLink value="删除" action="#{employeeBean.delete(emp.id)}"οnclick="return confirmDelete()"/></h:column></h:dataTable></h:form></ui:define> </ui:composition>
8. 员工编辑页面 (edit.xhtml)
xhtml
复制
下载
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://xmlns.jcp.org/jsf/facelets"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:f="http://xmlns.jcp.org/jsf/core"template="/WEB-INF/templates/template.xhtml"><ui:define name="content"><h2>#{employeeBean.employee.id == null ? '新增' : '编辑'}员工</h2><h:form id="editForm"><h:inputHidden value="#{employeeBean.employee.id}"/><h:panelGrid columns="3" styleClass="form-grid"><h:outputLabel for="empNumber" value="员工编号 *"/><h:inputText id="empNumber" value="#{employeeBean.employee.employeeNumber}"required="true" requiredMessage="员工编号不能为空"/><h:message for="empNumber" styleClass="error"/><h:outputLabel for="name" value="姓名 *"/><h:inputText id="name" value="#{employeeBean.employee.name}"required="true" requiredMessage="姓名不能为空"/><h:message for="name" styleClass="error"/><h:outputLabel for="department" value="部门"/><h:inputText id="department" value="#{employeeBean.employee.department}"/><h:message for="department"/><h:outputLabel for="phone" value="手机号码"/><h:inputText id="phone" value="#{employeeBean.employee.phoneNumber}"/><h:message for="phone"/></h:panelGrid><div class="form-actions"><h:commandButton value="保存" action="#{employeeBean.save}" styleClass="btn-save"/><h:button value="取消" outcome="/employee/list" styleClass="btn-cancel"/></div></h:form><f:metadata><f:viewParam name="id" value="#{employeeBean.employee.id}"/><f:event type="preRenderView" listener="#{employeeBean.prepareEdit(employeeBean.employee.id)}"/></f:metadata></ui:define> </ui:composition>
9. 员工搜索页面 (search.xhtml)
xhtml
复制
下载
<ui:composition xmlns="http://www.w3.org/1999/xhtml"xmlns:ui="http://xmlns.jcp.org/jsf/facelets"xmlns:h="http://xmlns.jcp.org/jsf/html"xmlns:f="http://xmlns.jcp.org/jsf/core"template="/WEB-INF/templates/template.xhtml"><ui:define name="content"><h2>员工搜索</h2><h:form id="searchForm"><h:inputText value="#{employeeBean.searchKeyword}" placeholder="输入姓名、部门或手机号"/><h:commandButton value="搜索" action="#{employeeBean.search}" styleClass="btn-search"/><h:dataTable value="#{employeeBean.employees}" var="emp" rendered="#{not empty employeeBean.employees}"styleClass="search-results"><!-- 同列表页的列定义 --></h:dataTable><h:outputText value="未找到匹配的员工" rendered="#{empty employeeBean.employees and not empty employeeBean.searchKeyword}"/></h:form></ui:define> </ui:composition>
10. JavaScript增强功能 (main.js)
javascript
复制
下载
// 删除确认 function confirmDelete() {return confirm("确定要删除该员工记录吗?此操作不可撤销!"); }// 表单验证增强 document.addEventListener('DOMContentLoaded', function() {const forms = document.querySelectorAll('form');forms.forEach(form => {form.addEventListener('submit', function() {const requiredFields = form.querySelectorAll('[required]');let valid = true;requiredFields.forEach(field => {if (!field.value.trim()) {valid = false;field.classList.add('input-error');} else {field.classList.remove('input-error');}});if (!valid) {alert('请填写所有必填字段(标有*的字段)');}return valid;});}); });
11. 数据库初始化脚本 (data.sql)
sql
复制
下载
INSERT INTO employee (employee_number, name, department, phone) VALUES ('EMP001', '张三', '技术部', '13800138000'), ('EMP002', '李四', '市场部', '13900139000'), ('EMP003', '王五', '财务部', '13700137000');
12. 系统功能说明
-
员工管理
-
列表展示:分页显示所有员工
-
新增员工:带表单验证
-
编辑员工:通过URL参数传递ID
-
删除员工:JavaScript确认对话框
-
-
搜索功能
-
关键字搜索:支持姓名/部门/手机号模糊搜索
-
实时结果显示:AJAX风格体验
-
-
技术亮点
-
JSF组件化UI:Facelets模板、数据表格、表单验证
-
EJB事务管理:@Stateless EJB处理业务逻辑
-
JPA ORM:实体关系映射、JPQL查询
-
响应式设计:CSS媒体查询适配移动设备
-
JavaScript增强:表单验证、删除确认
-
13. 部署指南
-
环境要求
-
Jakarta EE 10兼容服务器(WildFly 27+ / GlassFish 7+)
-
Java 17+
-
数据库(MySQL / PostgreSQL / H2)
-
-
部署步骤
bash
复制
下载
# 1. 创建数据库和数据源 $ sudo mysql -e "CREATE DATABASE employeedb" $ sudo mysql -e "CREATE USER 'employee'@'localhost' IDENTIFIED BY 'password'" $ sudo mysql -e "GRANT ALL ON employeedb.* TO 'employee'@'localhost'"# 2. 配置WildFly数据源 $ /path/to/wildfly/bin/jboss-cli.sh connect module add --name=com.mysql --resources=/path/to/mysql-connector-j.jar --dependencies=javax.api,javax.transaction.api data-source add --name=EmployeeDS --jndi-name=java:global/jdbc/EmployeeDS \--driver-name=mysql --connection-url=jdbc:mysql://localhost:3306/employeedb \--user-name=employee --password=password# 3. 构建部署 mvn clean package wildfly:deploy
-
访问路径
-
员工列表:http://localhost:8080/yourapp/employee/list.xhtml
-
员工搜索:http://localhost:8080/yourapp/employee/search.xhtml
-
新增员工:http://localhost:8080/yourapp/employee/edit.xhtml
-
14. 技术选择原因
-
JSF作为主要UI框架
-
组件化开发模式
-
内置AJAX支持
-
强大的生命周期管理
-
与Jakarta EE无缝集成
-
-
JavaScript增强场景
-
客户端表单验证
-
删除操作确认
-
动态UI效果
-
AJAX回调处理
-
-
EJB + JPA架构优势
-
声明式事务管理
-
容器管理持久化
-
分布式事务支持
-
线程安全保证
-
此实现严格遵循Jakarta EE 10规范,采用分层架构设计,实现了所有需求功能,并提供了良好的用户体验和代码可维护性。
相关文章:
重新测试deepseek Jakarta EE 10编程能力
听说deepseek做了一个小更新,我重新测试了一下Jakarta EE 10编程能力;有点进步,遗漏的功能比以前少了。 采用Jakarta EE 10 编写员工信息表维护表,包括员工查询与搜索、员工列表、新增员工、删除员工,修改员工…...

nav2笔记-250603
合作背景: AMD与Open Navigation在过去几个月里进行了合作,旨在向ROS 2社区展示AMD强大的Ryzen AI、Embedded和Kria能力。 演示内容: 帖子提到,他们已经开始展示如何使用Ryzen AI为自主机器人产品提供动力,在各种现实世…...

指纹识别+精准化POC攻击
开发目的 解决漏洞扫描器的痛点 第一就是扫描量太大,对一个站点扫描了大量的无用 POC,浪费时间 指纹识别后还需要根据对应的指纹去进行 payload 扫描,非常的麻烦 开发思路 我们的思路分为大体分为指纹POC扫描 所以思路大概从这几个方面…...
LeetCode[404]左叶子之和
思路: 题目要求求出左叶子的和,左叶子的条件是左右节点为空且是左子树的叶子节点才叫左叶子节点,那么右子树的左叶子节点的和是什么呢?这样想就引出了递归的顺序,后序遍历,求出左右子树的节点和,…...

mac环境下的python、pycharm和pip安装使用
Python安装 Mac环境下的python安装 下载地址:https://www.jetbrains.com.cn/pycharm/ 一直点击下一步即可完成 在应用程序中会多了两个图标 IDLE 和 Python launcher IDLE支持在窗口中直接敲python命令并立即执行,双击即可打开 Python launcher双击打…...
C语言多级指针深度解析:从一级到三级的奥秘
资料合集下载链接: https://pan.quark.cn/s/472bbdfcd014 在C语言中,指针是理解内存和进行底层编程的关键。我们知道,一个一级指针存储的是一个变量的内存地址。但C语言的强大之处在于,指针本身也可以有自己的地址,而存储这个指针的地址的变量,就是一个更高层次…...
uni-app学习笔记十九--pages.json全局样式globalStyle设置
pages.json 页面路由 pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。 导航栏高度为 44px (不含状态栏),tabBar 高度为 50px (不含安全区)。 它类似微信小程序中app.json的页面管理部…...

BUUCTF[极客大挑战 2019]Havefun 1题解
BUUCTF[极客大挑战 2019]Havefun 1题解 题目分析解题理解代码逻辑:构造Payload: 总结 题目分析 生成靶机,进入网址: 首页几乎没有任何信息,公式化F12打开源码,发现一段被注释的源码: 下面我们…...
【基础】Unity中Camera组件知识点
一、投影模式 (Projection) 1. 透视模式 (Perspective) 原理:模拟人眼,近大远小(锥形体视锥) 核心参数: Field of View (FOV):垂直视场角 典型值:第一人称 60-90,驾驶舱 30-45 特…...

Tomcat优化篇
目录 一、Tomcat自身配置 1.Tomcat管理页面 2. 禁用AJP服务 3.Executor优化 4.三种运行模式 5.web.xml 6.Host标签 7.Context标签 8.启动速度优化 9.其他方面 二、JMeter测试 笔者推荐 一、Tomcat自身配置 1.Tomcat管理页面 我们可以打开Tomcat的管理页面ÿ…...

Temporal Fusion Transformer(TFT)扩散模型时间序列预测模型
1. TFT 简介 Temporal Fusion Transformer(TFT)模型是一种专为时间序列预测设计的高级深度学习模型。它结合了神经网络的多种机制处理时间序列数据中的复杂关系。TFT 由 Lim et al. 于 2019年提出,旨在处理时间序列中的不确定性和多尺度的依…...

【LangServe部署流程】5 分钟部署你的 AI 服务
目录 一、LangServe简介 二、环境准备 1. 安装必要依赖 2. 编写一个 LangChain 可运行链(Runnable) 3. 启动 LangServe 服务 4. 启动服务 5. 使用 API 进行调用 三、可选:访问交互式 Swagger 文档 四、基于 LangServe 的 RAG 应用部…...

攻防世界-unseping
进入环境 在获得的场景中发现PHP代码并进行分析 编写PHP编码 得到 Tzo0OiJlYXNlIjoyOntzOjEyOiIAZWFzZQBtZXRob2QiO3M6NDoicGluZyI7czoxMDoiAGVhc2UAYXJncyI7YToxOntpOjA7czozOiJwd2QiO319 将其传入 想执行ls,但是发现被过滤掉了 使用环境变量进行绕过 $a new…...
微软推出 Bing Video Creator,免费助力用户轻松创作 AI 视频
2025 年 6 月 2 日,微软正式在自家 Bing 应用中上线了一项名为 “Bing Video Creator” 的新功能,为广大用户带来了全新的创作体验。 Bing Video Creator 背靠 OpenAI 当红的 Sora 视频生成模型,用户只需输入文字描述,就能直接生…...
(13)java+ selenium->元素定位大法之By_partial_link_text
1.简介 在上一篇中我们说了link_text,目前我们接着看partial link text,顾名思义是通过链接定位的(官方说法:超链接文本定位)。我们在上一篇的文章末尾有提到,这种方式的定位属于模糊匹配定位,什么是partial link text呢,看到part这个单词我们就可以知道,当这个文字超…...
Xget 正式发布:您的高性能、安全下载加速工具!
您可以通过 star 我固定的 GitHub 存储库来支持我,谢谢!以下是我的一些 GitHub 存储库,很有可能对您有用: tzst Xget Prompt Library 原文 URL:https://blog.xi-xu.me/2025/06/02/xget-launch-high-performance-sec…...

[yolov11改进系列]基于yolov11使用FasterNet替换backbone用于轻量化网络的python源码+训练源码
【FasterNet介绍】 为了设计快速神经网络,许多工作都集中在减少浮点运算的数量(FLOPs)上。 然而,我们观察到FLOPs的减少并不一定会导致延迟的类似程度的减少。 这主要源于低效率的每秒浮点运算(FLOPS)。 为了实现更快的网络&#…...

一周学会Pandas2之Python数据处理与分析-Pandas2数据绘图与可视化
锋哥原创的Pandas2 Python数据处理与分析 视频教程: 2025版 Pandas2 Python数据处理与分析 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili Pandas 集成了 Matplotlib,提供了简单高效的绘图接口,使数据可视化变得直观便捷。本指南将详…...

企业级安全实践:SSL/TLS 加密与权限管理(一)
引言 ** 在数字化转型的浪潮中,企业对网络的依赖程度与日俱增,从日常办公到核心业务的开展,都离不开网络的支持。与此同时,网络安全问题也日益严峻,成为企业发展过程中不可忽视的重要挑战。 一旦企业遭遇网络安全事…...

2025——》VSCode Windows 最新安装指南/VSCode安装完成后如何验证是否成功?2025最新VSCode安装配置全攻略
1.VSCode Windows 最新安装指南: 以下是 2025 年 Windows 系统下安装 Visual Studio Code(VSCode)的最新指南,结合官方文档与实际操作经验整理而成: 一、下载官方安装包: 1.访问官网: 打开浏览器,进入 VSCode 官方下载页面https://code.visualstudio.com/Download 2…...
RabbitMQ如何保证消息可靠性
RabbitMQ是一个流行的开源消息代理,它提供了可靠的消息传递机制,广泛应用于分布式系统和微服务架构中。在现代应用中,确保消息的可靠性至关重要,以防止消息丢失和重复处理。本文将详细探讨RabbitMQ如何通过多种机制保证消息的可靠…...

【MATLAB代码】制导——三点法,二维平面下的例程|运动目标制导,附完整源代码
三点法制导是一种导弹制导策略,主要用于确保导弹能够准确追踪并击中移动目标。该方法通过计算导弹、目标和制导站之间的相对位置关系,实现对目标的有效制导。 本文给出MATLAB下的三点法例程,模拟平面上捕获运动目标的情况订阅专栏后可直接查看源代码,粘贴到MATLAB空脚本中即…...
Spring Security用户管理机制详解
UserDetailsService契约解析 核心方法解析 UserDetailsService接口仅定义了一个关键方法loadUserByUsername(),其方法签名如下: public interface UserDetailsService {UserDetails loadUserByUsername(String username) throws UsernameNotFoundException; }该方法作为用…...

如何爬取google应用商店的应用分类呢?
以下是爬取Google Play商店应用包名(package name)和对应分类的完整解决方案,采用ScrapyPlaywright组合应对动态渲染页面,并处理反爬机制: 完整爬虫实现 1. 安装必要库 # 卸载现有安装pip uninstall playwright scrapy-playwright -y# 重新…...

SQL Relational Algebra(数据库关系代数)
目录 What is an “Algebra” What is Relational Algebra? Core Relational Algebra Selection Projection Extended Projection Product(笛卡尔积) Theta-Join Natural Join Renaming Building Complex Expressions Sequences of Assignm…...
如何安装huaweicloud-sdk-core-3.1.142.jar到本地仓库?
如何安装huaweicloud-sdk-core-3.1.142.jar到本地仓库? package com.huaweicloud.sdk.core.auth does not exist 解决方案 # 下载huaweicloud-sdk-core-3.1.142.jar wget https://repo1.maven.org/maven2/com/huaweicloud/sdk/huaweicloud-sdk-core/3.1.142/huawe…...
Electron桌面应用下,在拍照、展示pdf等模块时,容易导致应用白屏
Electron 应用白屏问题分析与解决方案 Electron 应用中拍照、PDF展示等模块导致白屏的常见原因通常与内存泄漏、渲染进程崩溃或资源加载超时有关。以下是具体排查与解决方法: 检查内存泄漏 项目中,分析代码,高频操作或未释放的资源可能导致…...

智能工业时代:工业场景下的 AI 大模型体系架构与应用探索
自工业革命以来,工业生产先后经历了机械化、电气化、自动化、信息化的演进,正从数字化向智能化迈进,人工智能技术是新一轮科技革命和产业变革的重要驱动力量,AI 大模型以其强大的学习计算能力掀开了人工智能通用化的序幕ÿ…...
【git stash切换】
问题 当前正在修改对应某个bug,突然来了个更紧急的工作,需要保留现场,去对应更紧急的事务,git该如何操作? 1. 查看当前工作状态(确认修改) git status 2. 保存当前工作现场(包含…...
React 18 生命周期详解与并发模式下的变化
1. React 生命周期概述 React 组件的生命周期可以分为三个阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting),以及错误处理阶段。 1.1. 挂载阶段(Mounting&#…...