H5：三方库及知识小拓展

学习网站

https://pro.ant.design/docs/getting-started-cn

---

常用三方库

redux #状态管理
react-redux
redux-thunk

react-transition-group #动画

axios #网络请求

events #事件总线

fastclick #解决移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件的问题

vue-lazyload #图片懒加载

normalize.css #定制的CSS文件，它让不同的浏览器在渲染网页元素的时候形式更统一

react-router-dom #React的路由
react-router-config #辅助react-router的插件，主要是使用配置文件集中式管理路由

antd #企业级的 UI 设计语言和 React 实现
@ant-design/icons

styled-components #以组件的形式来声明样式，让样式也成为组件从而分离逻辑组件与展示组件

@craco/craco #对项目中 wepback 进行自定义配置
craco-less #帮助加载 less 样式和修改变量

classnames #方便进行类名管理

moment #日期处理类库，用于解析、检验、操作、以及显示日期
dayjs
lodash

---

npm 与 yarn 对比

---

render函数的返回值

render函数的返回值

---

React生命周期
https://zh-hans.reactjs.org/docs/react-component.html

---

参数验证方式
https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html

---

拓展：
JSX转化为React.createElement的函数调用

https://zh- hans.reactjs.org/docs/react-component.html

---

实用三方开发库一览

"dependencies": {
    "antd": "^3.26.1",
    "antd-mobile": "^2.3.1",
    "axios": "^0.18.0",
    "better-scroll": "^1.15.2",
    "crypto-js": "^3.1.9-1",
    "entities": "^2.0.0",
    "eruda": "^1.5.0",
    "fastclick": "^1.0.6",
    "html2canvas": "^1.0.0-rc.3",
    "jsencrypt": "^3.0.0-rc.1",
    "mockjs": "^1.0.1-beta3",
    "moment": "^2.22.2",
    "prop-types": "^15.6.2",
    "qrcode": "^1.4.2",
    "qrcode.react": "^0.9.3",
    "rc-form": "^2.2.6",
    "react": "^16.4.1",
    "react-animations": "^1.0.0",
    "react-countup": "^4.1.3",
    "react-dom": "^16.4.1",
    "react-loadable": "^5.4.0",
    "react-radio-buttons": "^1.2.2",
    "react-router-dom": "^4.3.1",
    "react-virtualized": "^9.21.2",
    "styled-components": "^3.3.3",
    "uuid": "^3.4.0",
    "watermark-dom": "^2.2.1",
    "webpack-bundle-analyzer": "^3.6.1"
  },
  "devDependencies": {
    "autoprefixer": "^9.1.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.0.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-import": "^1.8.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "chalk": "^2.4.1",
    "copy-to-clipboard": "^3.0.8",
    "css-loader": "^0.28.11",
    "fast-json-stable-stringify": "^2.1.0",
    "eslint": "^6.7.2",
    "eslint-config-airbnb": "^18.0.1",
    "eslint-config-prettier": "^6.7.0",
    "eslint-plugin-babel": "^5.3.0",
    "eslint-plugin-compat": "^3.3.0",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-import": "^2.19.1",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-markdown": "^1.0.1",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.17.0",
    "express": "^4.16.3",
    "figlet": "^1.2.0",
    "file-loader": "^1.1.11",
    "fs-extra": "^7.0.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "inquirer": "^6.0.0",
    "mini-css-extract-plugin": "^0.4.1",
    "needle": "^2.2.1",
    "node-pty": "^0.7.6",
    "node-sass": "^4.12.0",
    "openurl": "^1.1.1",
    "ora": "^2.1.0",
    "postcss-import": "^12.0.0",
    "postcss-loader": "^2.1.6",
    "postcss-pxtorem": "^4.0.1",
    "postcss-url": "^7.3.2",
    "react-hot-loader": "^4.3.3",
    "react-sticky": "^6.0.3",
    "rm": "^0.1.8",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "url-parse": "^1.4.7",
    "webpack": "^4.14.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.3.1",
    "zip-dir": "^1.0.2"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]