antd pro 的使用总结（2）

最新推荐文章于 2024-07-25 16:33:55 发布

sikies

最新推荐文章于 2024-07-25 16:33:55 发布

阅读量957

点赞数

分类专栏： react框架框架学习 antd pro

本文链接：https://blog.csdn.net/qq_38277179/article/details/103322960

版权

react框架同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

框架学习

6 篇文章 0 订阅

订阅专栏

antd pro

2 篇文章 0 订阅

订阅专栏

1d.ts

declare 关键字主要用来生命全局变量。

更多关于declare 的知识：官方文档

注意：nameSpace 的一些知识

declare namespace

namespace 是 ts 早期时为了解决模块化而创造的关键字，中文称为命名空间。

由于历史遗留原因，在早期还没有 ES6 的时候，ts 提供了一种模块化方案，使用 module 关键字表示内部模块。但由于后来 ES6 也使用了 module 关键字，ts 为了兼容 ES6，使用 namespace 替代了自己的 module，更名为命名空间。

随着 ES6 的广泛应用，现在已经不建议再使用 ts 中的 namespace，而推荐使用 ES6 的模块化方案了，故我们不再需要学习 namespace 的使用了。

namespace 被淘汰了，但是在声明文件中，declare namespace 还是比较常用的，它用来表示全局变量是一个对象，包含很多子属性。

2 setState 异步性质

setState之后，组件不会立即执行更新state，而是将setState的改变的效果进入队列，并在某个特定的时间节点合并，一起刷新state。

具体可见 setSatte 为什么是异步的

因此，对于有的时候需要在一个setState之后进行想立即获取最新的state是不可能的，为了解决这个问题，可以使用 setState 的第二个参数，

setState(partialState[,callBack]);

这里的 callBack 是 state 导致的页面重新渲染的回调，相当于 componentDidUpdate.

3 antd-pro 的跨域问题解决

借助代理服务器

配置：在 config.ts 文件下

proxy: {
    '/test': { // 代表以“/test” 开头的所有请求，都会经过这个代理服务器
      target: 'http://192.168.88.140:32300', //url 的前缀，也就是目标服务器
      changeOrigin: true, //是否允许一个域名对应对个地址
      pathRewrite: {
        '': '',  //url中的一些预处理，如 "^test":"" 会将所有以test开头的字符串置空
      },
    },
  },

4 接口继承

类与类之间只能进行单继承，想要实现多继承需要使用 Mixins 的方式

接口继承类也只能进行单继承，想要实现多继承需要使用 Mixins 的方式 Mixins 方式模拟多继承的缺陷：

只能在继承一级父类的方法和属性

如果父类中含有同一种方法或属性，会根据赋值的顺序，先赋值的会被覆盖掉

接口与接口之间可以直接进行多继承

类实现接口可以进行多实现，每个接口用 , 隔开即可

作者：暖生
链接：https://juejin.im/post/5c386a156fb9a049fb43e109
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一个接口可以继承多个接口，从而创建出多个接口合成的接口。

5 createLogger 的引入

src 目录下新建 app.js 文件，写入下面内容：


import { createLogger } from 'redux-logger';

export const dva = {
    config: {
        onError(err) {
            err.preventDefault();
        },
        onAction: createLogger(),
    },
};

暂时不知道为什么这样用，github 上issue 也没有解决

6 数组的 reduce 方法

array.reduce 是一个数组元素迭代方法，例子：

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.reduce(function(total, currentVal, currentIndex, array){
    console.log("total",total);
    console.log("currentVal", currentVal);
    console.log("currentIndex", currentIndex);
    console.log("array", array);
    return total-currentVal;
},100);

结果：

暂时没有发现在哪里可以应用，可能会在某些算法笔试题中用到吧

7 antd 的格栅布局

将整个横向区域按照24等分进行划分

gutter：设置每个区域间隔

col：设置每列所占的格栅数

具体可以参照：官网

8 覆盖组件的样式

由于引入的 antd 组件类名没有被 css modules 转化，所以被覆盖的类名必须被放在 :global 中

.customSelect {
    :global {
        .ant-select-selection{
            /**样式override style*/
        }
    }
}
//对应jsx文件
import styles  from "./style.less";
<div className={styles.customSelect}>
    <div className="ant-select-selection"></div>
</div>

这里在global 外边在套一层 className 为了包裹 ant-select-selection 类名，防止对其他类名造成影响。

另外一种方法：

外部如何覆盖局部样式

当生成混淆的 class 名后，可以解决命名冲突，但因为无法预知最终 class 名，不能通过一般选择器覆盖。我们现在项目中的实践是可以给组件关键节点加上 data-role 属性，然后通过属性选择器来覆盖样式。

如
// dialog.js
  return <div className={styles.root} data-role='dialog-root'>
      <a className={styles.disabledConfirm} data-role='dialog-confirm-btn'>Confirm</a>
      ...
  </div>
// dialog.css
[data-role="dialog-root"] {
  // override style
}
因为 CSS Modules 只会转变类选择器，所以这里的属性选择器不需要添加 :global。