# React-antd

**Repository Path**: Walbert/React

## Basic Information

- **Project Name**: React-antd
- **Description**: 技术：cri+redux+antd
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2020-04-09
- **Last Updated**: 2020-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# antd 初始化配置

1. 导入 antd ui 框架

```js
 yarn add antd -s
```

2. 用于 webpack 配置

```js
    yarn add react-app-rewired customize-cra -D
```

3. 修改 package.json

```js
    /* package.json */
    "scripts": {
       "start": "react-app-rewired start",
       "build": "react-app-rewired build",
       "test": "react-app-rewired test",
    }
```

4. babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件

```js
 yarn add babel-plugin-import
```

5. 在项目根目录创建一个 config-overrides.js 用于修改默认配置。

```js
const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
    fixBabelImports("import", {
        libraryName: "antd",
        libraryDirectory: "es",
        style: "css",
    })
);
```

6. 中文配置 index.js 中配置

```js
import zhCN from "antd/es/locale/zh_CN";
import { ConfigProvider } from "antd";

<ConfigProvider locale={zhCN}>
    <App />
</ConfigProvider>;
```

7. 路由按需加載 懒加载

```
  yarn add react-loadable
```

8. 接口配置数据地址

可以在线编辑接口数据
http://rap2.taobao.org/repository/editor?id=248851

9. Excel 导出

```
  yarn add xlsx
```

10. 富文本编辑器 http://www.wangeditor.com/

```
  npm install wangeditor
```


### React 常见的问题处理

1. React 组件名称必须具有以大写字母开头。如果组件名称不以大写字母开头，则组件使用将被视为内置元素，例如 div 或 span。

2. **问题：** 组件销毁后 对已销毁的组件进行 异步请求、更新或赋值 会导致内存泄漏
   **处理：**

    - 既然组件销毁后异步请求或更新报错，我们应该在组件销毁的时候将异步请求撤销

    ```js
    componentWillUnmount = () => {
        this.setState = (state, callback) => {
            return;
        };
    };
    ```

    - 基于思路，不想每次判断，将其封装，利用修饰器对 componentWillUnmount 和 setState 进行改装

    ```js
    function inject_unount(target) {
        // 改装componentWillUnmount，销毁的时候记录一下
        let next = target.prototype.componentWillUnmount;
        target.prototype.componentWillUnmount = function () {
            if (next) next.call(this, ...arguments);
            this.unmount = true;
        };
        // 对setState的改装，setState查看目前是否已经销毁
        let setState = target.prototype.setState;
        target.prototype.setState = function () {
            if (this.unmount) return;
            setState.call(this, ...arguments);
        };
    }
    @inject_unount
    class BaseComponent extends Component {}
    //以后写组件时直接继承BaseComponent
    ```

3. React 中监测屏幕宽度，高度

```js
componentDidMount(){
      /* 监测屏幕尺寸 */
      window.addEventListener('resize', this.resize);
      this.resize();
}

/*移掉监测*/
componentWillUnmount(){
      window.removeEventListener('resize',this.resize);
  }
  /* 页面尺寸改变 */
  resize=()=>{
      const height = document.documentElement.clientHeight;
      console.log(height)
  }
    
```