ant design pro和quill.js在实际工作遇到的问题

1、ant design pro 网络请求封装中的坑

Ant design pro中的网络请求时封装了fetch来实现的，pro约定了当状态码200~300为网络请求成功状态，其余均为失败状态。其次，pro对delete方法以及网络状态为204时自动做了text()方法，在校验delete方法时，要注意json.parse()后进行校验，并且谨慎使用204的网络状态。

网络状态200·300成功

删除，204时toText处理

避免网络状态错误后，造成js报错。比如，接口token超时返回401时，这时不会返回response，要避免在直接对resopnse内深层数据的判断。

2、富文本中的坑（基于quill.js）

在引用富文本后，输出为html标签形式的文本，输出文本的样式方面，富文本采用的做法是：引入主题css样式，有class和style共同起作用，这就导致了将输出的文本直接插入dom容器中，样式与富文本内不一致的问题，解决方案为：在需要现在富文本内容的外层容器上，手动填加class类名，并且保证富文本文字在css的作用域内。

富文本字数的坑，富文本是dom元素形式，在判断文字长度上会出现问题，并不能准确无误的限制文字数量，可以用一些第三方的domToString工具大概计算出文体长度，但是不建议对富文本做字数限制。

定制富文本样式的坑：富文本组件的内容一般有两种形式，一种是通过before、after伪类通过css的方式渲染组件上的文字图案，这种可以通过覆盖css直接解决。另外一种是写在模板里的，这种方式的文案无法用常规方式修改，只能通过自定义富文本组件（自己实现），以及修改dom元素的方式。两种方式均不推荐。

富文本内置组件处理输入数据的坑：以链接组件为例，例如需要对链接的输入做校验，可以通过继承富文本组件类，重构create方法实现，create方法必须返回一个dom元素，所以，当输入不合法是，需要返回一个空dom元素。不可以不返回。

富文本弹出插件布局的坑：富文本弹出插件是以内部dom元素做的绝对定位，当富文本内部出现滚动时，富文本弹出插件的位置会错乱，解决方案是：让富文本随着文字增加，自动加长高度。

3、错误提示风格问题导致的坑

提示风格不统一最主要原因是，对于一些非常规表单元素，或者是大表单夹在着的非常规表单元素没有按照自定义表单元素来处理。在代码最开始写的时候，就使用自定义表单控件来构建。

https://ant.design/components/form-cn/#components-form-demo-customized-form-controls

4、字符串为空串的坑

在校验、提交前，执行trim()操作，但是要避免对null和undefined做trim，所以，需要做trim的字段如果有默认值（初始值）时，要给’’,而不是nulll和undefined。

5、按钮重复点击的问题

对于时间较长的操作，直接添加loading效果，对于时间较短且不可以多次点击的操作，添加debounce节流。

6、对于存在默认值并且可以修改的地方（用户头像）自动闪（改变）的问题

监听获取的网络请求，对返回值进行判断，没有显示默认，有显示网络数据，获取数据时，使用loading优化体验。

7、前端单页APP样式冲突

使用cssmodules，避免直接给元素写class类名，而是通过style.XXX引入，在直接对标签修改样式时，外层要包裹类名，避免污染全局。

8、前端单页APP路由参数改变不会重新走全部生命周期的坑

只有路由参数变化，进行路由push方法时，是不会走组件的生命周期中的方法，对于复用页面间直接跳转场景时，是不会刷新页面的。解决方案有两种，第一，修改路由地址，复用页面使用不同地址但是指向同一个组件。第二，使用dva中的subscriptions，监听路由去触发action。

9、前端单页APP数据缓存的问题

在项目开发后期有提到这个需求，但是改动风险大并未做实现，对这个需求，有一个设想的解决方案。保留页面离开时现场（redux默认已经实现，redux数据默认不会清空），在组件的初始时，判断路由参数中页面场景的变量，来决定是否走页面的初始化还是返回现场。

具体来说，把页面的数据分为两类存储在redux中，一类是决定因素的数据，表格分页，排序信息。另外一类是页面数据。当页面数据回滚时，直接显示页面数据，当页面需要初始化时，修改决定因素数据（第一部分），并获取到页面数据用于显示。当遇到保留决定因素（分页信息保留），但需要重新获取页面数据时，用决定数据去重新获取页面数据。

10、蚂蚁组件样式覆盖的坑

对于常规组件，只要控制好css作用域，在需要覆盖的class外嵌套一层global选择器即可，对于一些弹出类的组件，组件dom节点并不在当前的页面下（通常在body下），这是，需要给组件填在外层样式类名，并且在全局中添加这个外层样式类名，并在这个样式类名下使用global选择器修改默认样式。