一、引言
作者最近新的平台项目是需要用react的，和vue区别还是比较大的，这里记录下踩坑和使用经验。
二、环境
框架：antd
依赖：
"dependencies": { "@ant-design/icons": "^4.7.0", "@ant-design/plots": "^1.0.9", "@aws-sdk/token-providers": "3.501.0", "@babel/helper-string-parser": "^7.22.5", "@loadable/component": "5.15.3", "@rjsf/antd": "^5.13.0", "@rjsf/core": "^5.13.0", "@rjsf/utils": "^5.13.0", "@rjsf/validator-ajv8": "^5.13.0", "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", "ajv": "^8.12.0", "antd": "^4.20.0", "axios": "^0.21.1", "babel-eslint": "^10.1.0", "bignumber.js": "^9.1.2", "core-js": "^3.20.3", "cross-env": "^7.0.2", "customize-cra": "^1.0.0", "diff_match_patch": "^0.1.1", "ejs": "^3.1.3", "enzyme": "^3.11.0", "express": "^4.17.1", "json-bigint": "^1.0.0", "lodash": "^4.17.21", "mockjs": "^1.1.0", "moment": "^2.29.4", "nodemon": "^2.0.4", "qrcode": "^1.5.1", "qrcode.react": "^3.1.0", "rc-queue-anim": "^2.0.0", "rc-texty": "^0.2.0", "rc-tween-one": "^3.0.6", "react": "^17.0.2", "react-app-rewired": "^2.1.8", "react-dom": "^17.0.2", "react-router-dom": "^5.2.0", "react-scripts": "4.0.2", "react-transition-group": "^4.4.2", "styled-components": "^6.1.8", "tslib": "^2.4.0", "typescript": "~3.7.2", "xlsx": "^0.18.5", "yarm": "^0.4.0", "yarn": "^1.22.19" },三、React踩坑
1、编译
不知道是react本身编译规则严苛，还是公司的pipline设定，代码里面编译的时候不允许有未使用的变量，不允许使用未导入的组件
举个例子，如果使用了分页，但是没有导入Pagination，编译报错
import {Button, Modal, Layout, messag, Space, Table, Cascader, Input} from 'antd';<Pagination onChange={this.onPageChange} total={this.state.totalSize}/>如果标识了参数但是没有用，编译报错
onPageChange = (page, size) => { this.setState({page: page}); this.loadList(); };2、变量延迟
这是很坑的，设置变量值之后居然没有变，是有延迟的，所以当设置完之后需要间隔一下再去使用，作者就出现了点击第二页显示第一页
onPageChange = (page, size) => { this.setState({size: size}); this.setState({page: page}); setTimeout(() => { this.loadList(); }, 5); };3、分页
根据官网显示，列表数量超过50才会显示数量选择器，除非你显式指定，但是问题是有必要组件自己做这种判断吗，看的人一头雾水
4、上传文件多次触发
这里就是上传组件里面嵌套了一个按钮，不知道为什么选中文件之后会多次触发fileChange
，fileChange调用upload然后后面两次的文件还是空的，然后就告警两次
<Upload loading={this.state.uploadLoading} id='modify-excel-input' className='modify-excel-input' accept='.xls,.xlsx' action={getUploadFileUrl()} beforeUpload={this.checkFile} onRemove={this.deleteFile} onChange={this.fileChange} maxCount={1} > <Button loading={this.state.uploadLoading} icon={<UploadOutlined/>}>上传</Button> </Upload>upload = () => { console.log('RetrySelect upload'); if (this.state.fileList == null || this.state.fileList.length <= 0 || this.state.fileList[0].response == null || this.state.fileList[0].response.length <= 0) { message.error("请上传文件"); return; } }所以作者就在fileChange里面加了判断看文件是否为空
fileChange = ({fileList: newFileList}) => { if (newFileList == null || newFileList.length <= 0 || newFileList[0].response == null || newFileList[0].response.length <= 0) { return; } console.log("文件列表： ", newFileList); this.state.fileList = newFileList; this.upload(); }5、绑定本地变量
输入框、选择框之类的组件需要和本地变量进行绑定，但是他就不像vue简单的设置v-model就可以，他需要识别变更方法
还必须bind(this)，不然绑定本地变量的话根本没法写进输入框，官网也没什么说法，chatGpt也不知道，让人一头雾水
<Input maxLength={100} value={this.state.subject} style={{width: '350px'}} onChange={this.changeSubject.bind(this)} placeholder="请输入"/>changeSubject = (event) => { this.setState({subject: event.target.value}); };四、使用
这里再介绍一些基础使用
1、动态列
如果表格数据不固定，就可以后端返回列名
const processedColumns = resData.columns.map(column => { return { ...column, dataIndex: column.dataIndex, title: column.title, width: '200px', }; }); this.setState({columns: processedColumns})<Table columns={this.state.columns} dataSource={this.state.list} bordered scroll={{x: 1500, y: 'calc(100vh - 350px)'}} pagination={false} />2、超长展示
超过一定长度展示省略号，悬浮展示所有
{ title: 'response', dataIndex: 'response', width: '180px', render: (text) => { return <Tooltip placement="top" title={text}> <div style={{ width: 150, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{text}</div> </Tooltip> } },3、跳转携带参数
原始页面把参数直接缀在路径后面就可以，如果是很多参数可以用json转字符串，到目标页面进行解析
const w = window.open('about:blank'); w.location.href = '#/detail/' + record.id;目标页面通过匹配参数拿到
constructor(props) { super(props); this.state = { loadingExecute: false, id: props.match.params.id,参数的名字是由配置url页面决定的
{ path: '/detail/:id?', name: 'detail', pageId: '1010', authPass: true, },4、弹窗
他的弹窗使用visible属性判断是否展示的，在render里面定义号，然后通过更新本地变量进行展示隐藏
<Modal visible={this.state.executeVisible} onOk={this.goExecute.bind(this)} onCancel={this.handleCancel.bind(this)} footer={[ <Button key="submit" type="primary" onClick={this.goExecute.bind(this)}> 确认 </Button>, <Button key="back" onClick={this.handleCancel.bind(this)}> 取消 </Button> ]}> <div style={{marginTop: '20px'}}> <span style={{width: '80px', marginRight: '10px'}}>工单</span> <Input maxLength={100} value={this.state.woCode} style={{width: '350px', marginRight: '20px'}} onChange={this.changeWoCode.bind(this)} placeholder="请输入"/> </div> <div style={{marginTop: '20px'}}> <span style={{width: '80px', marginRight: '10px'}}>主题</span> <Input maxLength={100} value={this.state.subject} style={{width: '350px'}} onChange={this.changeSubject.bind(this)} placeholder="请输入"/> </div> </Modal>5、获取浏览器信息
主要是获取域名和cokkie
const cookie = document.cookie.split(';')const host = document.domain.toLowerCase()五、总结
不同的前端使用起来区别挺大的，作者感觉还是vue好用一些，不过react好像更加国际化一些，公司整体还是偏向用react。
