React

1 环境搭建

1.1 搭建React Native

1.1.1 搭建 Node

1. npm安装失败，解决方法

1.1.2 下载Android Studio

1. Android Studio 里的Cannot resolve symbol XXX：
   • https://www.jianshu.com/p/91cfa8df3128
   • https://blog.csdn.net/m0_37292262/article/details/81395369
   • https://blog.csdn.net/godcok/article/details/82463984

1.1.3 安装react-native-cli

1. https://blog.csdn.net/qq_32114025/article/details/88638045

1.1.4 npm下载package失败，切换 管理员身份运行cmd

• https://www.cnblogs.com/ClassNotFoundException/p/6737164.html

2 工具使用

2.1 使用WebStorm

2.1.1 配置WebStorm辅助编程

• https://www.jianshu.com/p/85d8e5e1c22d

2.1.2 使用代码模板

• https://blog.csdn.net/weixin_38080573/article/details/88315159

2.1.3 代码补全

• https://blog.csdn.net/aa330233789/article/details/103134580

2.1.4 格式化代码快捷键

• CTRL+ALT+/

2.1.5 取消ESLint

• https://blog.csdn.net/fuck487/article/details/84147778

2.1.6 Debugger

• react-native-debugger – https://github.com/jhen0409/react-native-debugger/releases/tag/v0.11.7

2.2 Mobx

2.2.1 配置mobx

• https://www.jianshu.com/p/b4856b84b64e

3 常见用法

3.1 map和reduce

• map：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

var numbers = [1, 2, 3, 4];
var filteredNumbers = numbers.map(function(num, index) {
  if(index < 3) {
     return num;
  }
});
//index goes from 0,so the filterNumbers are 1,2,3 and undefined.
// filteredNumbers is [1, 2, 3, undefined]
// numbers is still [1, 2, 3, 4]

• reduce：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

[0, 1, 2, 3, 4].reduce((accumulator, currentValue, currentIndex, array) => {
    return accumulator + currentValue
}, 10) // 10 为 initialValue，相当于给accumulator赋初值

callback	accumulator	currentValue	currentIndex	array	return value
first call	10	0	0	[0, 1, 2, 3, 4]	10
second call	10	1	1	[0, 1, 2, 3, 4]	11
third call	11	2	2	[0, 1, 2, 3, 4]	13
fourth call	13	3	3	[0, 1, 2, 3, 4]	16
fifth call	16	4	4	[0, 1, 2, 3, 4]	20

3.2 获取当前时间

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

• 获取当前时间：https://momentjs.com/

3.3 在Form中使用DatePicker

<Item label="走失时间">
                          {
                              getFieldDecorator('lostTime', {
                                  // 在DatePicker中使用getFieldDecorator需要设置initialValue，而不能用defaulValue
                                  initialValue: moment(this.incident.lostTime, format),
                                  rules: [
                                      {required: true, message: '必须输入走失时间'},
                                  ]
                              })(<DatePicker
                                  locale={Locale}
                                  placeholder="请输入走失时间"
                                  format={format}
                                  showTime={{format: formatTime}}
                              />)
                          }
                      </Item>

3.4 DatePicker设置成中文

// 注意导入正确包名才能生效
import locale from 'antd/es/date-picker/locale/zh_CN';

<DatePicker locale={locale} />;

3.5 按pageNum获取数据

• 设置了onChange就不要设置current，否则会导致跳转失灵。

6. 快速生成数组

• 详见博客：https://www.cnblogs.com/fuzitu/p/10723869.html

let timeSpan=Array.from({length:N},(value,index)=>index+start + '月');

7. 在字符串中使用占位符

`近${N}个月任务完成情况统计` // 反引号`+$

8. 报错Import in body of module; reorder to top

• 如果您在两次variable导入之间声明了in，则会收到此错误，

import React from 'react';
import axios from 'axios';

const URL = process.env.REACT_APP_API_BASE;

import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

• variables导入所有内容后进行声明，

import React from 'react';
import axios from 'axios';
import demoXLXSFile from '../../assets/others/Demo.xlsx';
import './student.list.styles.scss';

const URL = process.env.REACT_APP_API_BASE;

9. 引入.less文件可以在路由文件中直接映入，对该路由组件中的所有路由页面生效

10. npm和yarn缓存清理

npm cache clean --force

yarn cache clean

11. 【node.js】项目启动与关闭

1. 查看当前服务器端口占用情况

netstat -ano

2、关闭被占用端口的服务

tskill 5728

3、启动服务

node app.js -p 18080

4.如果要服务后台运行的话，可以用forever进行管理

npm install -g forever

forever start app.js   //启动

forever stop app.js   //关闭

5.用自带的服务nohub

nohup node index.js > myLog.log 2>&1 &      //启动

pkill node   //关闭 node 服务

12. antd-Cascader省市级联

• 详见博客：https://www.jianshu.com/p/0278aade294d

13. 报错’React’ must be in scope when using JSX react/react-in-jsx-scope

import react, {Component} from 'react';

• react 应该大写，这里小写导致错误；

14. 导入一个组件目录下的所有.js文件

const moduleFiles = require.context('./module', true, /\.js$/);

15. 数组倒序排序

// 正序
array = [150, 230, 224, 218, 135, 147, 260].sort()
// 倒序
array = [150, 230, 224, 218, 135, 147, 260].sort().reverse();

16. 日期区间选择

import {DatePicker} from "antd";
import moment from "moment";
import {formatDate} from "../../../utils/dateUtils";
import Locale from 'antd/es/date-picker/locale/zh_CN';

import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const { RangePicker } = DatePicker;

17. 发布及部署React项目

• 详见博客：https://m.html.cn/qa/react/14488.html

18. 表格column属性的dataIndex支持嵌套写法

• 支持a.b.c 和 a[0],b[0]写法

2 数据可视化

1. echarts饼图自动显示数据

• 详见博客：https://blog.csdn.net/kai_wei/article/details/51788355

2. 设置柱状颜色

• 详见博客：https://blog.csdn.net/t876587201/article/details/70159076

3. 设置两张图并列

.chart-left {
  width: 40%;
  float: left;
  padding-left: 100px;
}

.chart-right {
  width: 50%;
  float: right;
  padding-right: 100px;
}

// 如下是react代码
<span className='chart-left'>
	<LostDay/>
</span>
<span className='chart-right'>
	<LostTime/>
</span>

4. 导入城市区县图

• github项目：https://github.com/echarts-maps/echarts-china-cities-js

import 'echarts/map/js/province/chongqing'
import "echarts/map/js/province/xianggang"

5. 导入全国地图或者省市图

import 'echarts/map/js/province/chongqing'
import "echarts/map/js/province/xianggang"

6. 生成地图热力图

const option = {
    title: {
        text: '香港18区人口密度 （2011）',
        subtext: '人口密度数据来自Wikipedia',
        sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
    },
    tooltip: {
        trigger: 'item',
        formatter: '{b}<br/>{c} (p / km2)'
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    visualMap: {
        min: 800,
        max: 50000,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        inRange: {
            color: ['lightskyblue', 'yellow', 'orangered']
        }
    },
    series: [
        {
            name: '香港18区人口密度',
            type: 'map',
            mapType: '重庆', // 自定义扩展图表类型，注意城镇要用中文
            label: {
                show: true
            },
            data: [
                {name: '中西区', value: 20057.34},
                {name: '湾仔区', value: 15477.48},
                {name: '东区', value: 31686.1},
                {name: '南区', value: 6992.6},
                {name: '油尖旺', value: 44045.49},
                {name: '深水埗', value: 40689.64},
                {name: '九龙城', value: 37659.78},
                {name: '黄大仙', value: 45180.97},
                {name: '观塘区', value: 55204.26},
                {name: '葵青区', value: 21900.9},
                {name: '荃湾区', value: 4918.26},
                {name: '屯门区', value: 5881.84},
                {name: '元朗区', value: 4178.01},
                {name: '北区', value: 2227.92},
                {name: '大埔区', value: 2180.98},
                {name: '沙田区', value: 9172.94},
                {name: '西贡区', value: 3368},
                {name: '离岛区', value: 806.98}
            ],
            // 自定义名称映射
            nameMap: {
                'Central and Western': '中西区',
                'Eastern': '东区',
                'Islands': '离岛',
                'Kowloon City': '九龙城',
                'Kwai Tsing': '葵青',
                'Kwun Tong': '观塘',
                'North': '北区',
                'Sai Kung': '西贡',
                'Sha Tin': '沙田',
                'Sham Shui Po': '深水埗',
                'Southern': '南区',
                'Tai Po': '大埔',
                'Tsuen Wan': '荃湾',
                'Tuen Mun': '屯门',
                'Wan Chai': '湾仔',
                'Wong Tai Sin': '黄大仙',
                'Yau Tsim Mong': '油尖旺',
                'Yuen Long': '元朗'
            }
        }
    ]
}

7. React生成词云

1.安装

yarn add react-wordcloud

npm install react-wordcloud –save

2.使用

import * as React from “react”;

import ReactWordcloud from “react-wordcloud”;

import React, { Component } from 'react';
import ReactWordcloud from "react-wordcloud";
class CiYun extends Component {
    constructor(props) {
        super(props)
   
    }
    render() {
            const wordsJsonList = [
  { text: "hello", value: 3 },
  { text: "world", value: 12.5 },
  { text: "github", value: 1 },
  { text: "code", value: 1 }
];
        return (
            <div>
<ReactWordcloud words={wordsJsonList} />
            </div>
        )
    }
}

export default CiYun

8. 调整legend位置

legend: {
                data: ['进行中', '暂缓', '已完成'],
                top:30,
            },