React项目依赖升级

zx钟

发布于 2024-01-02 17:25:53

1770

发布于 2024-01-02 17:25:53

文章被收录于专栏：测试游记

当前问题

现在编译时间过长,镜像构建时长就达到了20分钟+

通过项目依赖升级后,镜像构建时长大约3-5分钟

修改内容

之前的技术方案:roadhog(2.x)+antd(3.x)+React(16.x)+dva(2.x)

现在的技术方案:[Create React App]craco(7.x)+antd(5.x)+React(18.x)+react-redux(9.x)+react-router(6.x)

roadhog(https://github.com/sorrycc/roadhog)已经是2018的技术了,很久没有维护了,并且随着技术的发展,其他第三方包的依赖要求也发生改变,需要修改更多的webpack配置来适应,但是roadhog暴露的配置入口比较少,很多配置无法设置,它自己也升级到了umi(https://github.com/umijs/umi)

antd3.x中的Form组件使用比较麻烦,dva也有相同的问题

下面是一个使用dva+Form的组件导出时的配置

export default connect(({ user, moon }) => ({ user, moon }))(Form.create()(RecordList));

所以使用新版antd+redux来进行替换

项目结构

src
├── assets            #静态文件(样式,图片等)
├── base-ui           #基础的组件(整体布局等)
├── components        #公共的组件
├── hooks             #钩子函数
├── router            #路由
├── services          #接口
├── store             #redux数据
├── utils             #通用函数
└── views             #业务组件

破坏性修改

Antd

Form

导出

export default Form.create()(RecordList); // 修改前
export default RecordList; // 修改后

使用

const { form } = props; // 修改前
const [form] = Form.useForm(); // 修改后

html部分

修改前

const { getFieldDecorator } = form;
<Form.item label="版本">
  {getFieldDecorator('version', { rules: [{ required: true, message: '请输入版本！' }]})(
 <Select allowclear="{true}" onselect={(select) => { setVersion(select); }} > {versionList.map((item) => (  {item}  ))} </Select> )}
</Form.item>

修改后

 <Form.item label="版本" name="version" rules=[{ required: true, message: '请输入版本！' }]>
  <Select allowclear={true} onselect={(select) => { setVersion(select); }} > {versionList.map((item) => (  {item}  ))} </Select>
 </Form.item>

router

路由使用react-router

跳转页面

import { useNavigate } from 'react-router-dom';

const navigate = useNavigate();
navigate(URL); // URL要跳转的地址

查看当前url

import { useLocation } from 'react-router-dom';

const location = useLocation();
location.pathname

地址解析1

地址:

/flow/repeateDetailPage?appName=designer-outer-circle&traceId=172028160022170356254345311901ed

路由配置

{ path: 'repeateDetailPage', element: <RepeateDetailPage /> },

解析

 import { useSearchParams } from 'react-router-dom';

 const [searchParams] = useSearchParams();
 const queryString = Object.fromEntries(searchParams);
 const { appName, traceId } = queryString;

地址解析2

地址:

/flow/module/designer-outer-circle/dev/time_designer-outer-circledev1703556582219

路由配置

{ path: 'module/:appName/:env/:recordid', element: <FlowModule /> },

解析

import { useParams } from 'react-router-dom';
const queryString = useParams();

const { appName, env, recordid } = queryString

react-redux

数据缓存

以config为例

import { createSlice } from '@reduxjs/toolkit';

const configSlice = createSlice({
  name: 'config',
  initialState: {
    fullScreen: false,
  },
  reducers: {
    changeFullScreen(state, { payload }) {
      state.fullScreen = payload;
    },
  },
});

export const { changeFullScreen } = configSlice.actions;
export default configSlice.reducer;

使用

import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { changeFullScreen } from '@/store/modules/config';

const dispatch = useDispatch();
// 获取到state中的值
const { fullScreen } = useSelector((state) => ({ fullScreen: state.config.fullScreen }), shallowEqual);
// 修改state中的值
dispatch(changeFullScreen(false))

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-12-27，如有侵权请联系 cloudcommunity@tencent.com 删除

react