从上家公司,来到新的公司,接手了一个新的项目(项目很复杂庞大)。刚接手时,完全是懵逼状态的,项目要求,及业务逻辑完全不知道,甚至连用到的技术,都不知道,以至于我看了一星期代码任何头绪都没有。所以整理了一下,项目中遇到的新技术。
项目中的新技术总结
1.使用的框架是dva.js+react,的轻量级框架(注意是框架而不是插件及dva-cli)
这个框架我从来到,这个公司之前都没接触过,但是react-cli和redux还是接触过的。于是我去搜了一下关于dva.js的介绍,和使用方法。具体使用方法我就不说了。这里只例举简单的使用方法。
首先简单介绍dva.js:
dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。
特性
- 易学易用,仅有 6 个 api,对 redux 用户尤其友好,配合 umi 使用后更是降低为 0 API
- elm 概念,通过 reducers, effects 和 subscriptions 组织 model
- 插件机制,比如 dva-loading 可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading
- 支持 HMR,基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR
使用方法步骤:
1.安装dva-cli
通过 npm 安装 dva-cli 并确保版本是 0.9.1
或以上。
$ npm install dva-cli -g
$ dva -v
dva-cli version 0.9.1
创建新应用
安装完 dva-cli 之后,就可以在命令行里访问到 dva
命令(不能访问?)。现在,你可以通过 dva new
创建新应用。
$ dva new dva-quickstart
这会创建 dva-quickstart
目录,包含项目初始化目录和文件,并提供开发服务器、构建脚本、数据 mock 服务、代理服务器等功能。
然后我们 cd
进入 dva-quickstart
目录,并启动开发服务器:
$ cd dva-quickstart
$ npm start
几秒钟后,你会看到以下输出:
Compiled successfully!
The app is running at:
http://localhost:8000/
Note that the development build is not optimized.
To create a production build, use npm run build.
在浏览器里打开 http://localhost:8000 ,你会看到 dva 的欢迎界面。
具体使用方法和API请看dva.js的官网https://dvajs.com/guide/;
2.react中的withRouter
作用:把不是通过路由切换过来的组件中,将react-router 的 history、location、match 三个对象传入props对象上。
默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push('/detail')跳转到对应路由的页面
然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props
一:如何使用withRouter:
比如app.js这个组件,一般是首页,不是通过路由跳转过来的,而是直接从浏览器中输入地址打开的,如果不使用withRouter此组件的this.props为空,没法执行props中的history、location、match等方法。
我就通过在App.js组件中使用withRouter来简单介绍一下:
设置withRouter很简单只需要两步:(1)引入 (2)将App组件 withRouter() 一下
import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{
//此时才能获取this.props,包含(history, match, location)三个对象
console.log(this.props); //输出{match: {…}, location: {…}, history: {…}, 等}
render(){return (<div className='app'>
<NavLink to='/one/users'>用户列表</NavLink>
<NavLink to='/one/companies'>公司列表</NavLink>
<Switch>
<Route path='/one/:type?' component={One} />
<Redirect from='/' to='/one' exact />
<Route component={NotFound} />
</Switch>
</div>)
}
}
export default withRouter(App); //这里要执行一下WithRouter
具体方法请看:https://www.cnblogs.com/luowenshuai/p/9526341.html;
3.React-helmet
React Helmet是一个库,允许<head>
在渲染树中的任何位置设置标记内的元素。
如果需要根据内容动态更新页面标题,可以使用浏览器 document.title
API。对于更复杂的方案,当你想要从 React 组件更改标题时,可以使用 React Helmet 第三方库。
具体请看https://reactjs.net/features/react-router.html;
4.react生命周期的使用
UNSAFE_componentWillMount () {
this.props.dispatch({
type:'dataquery/initQuery',
})
}
刚看到这个生命周期后,我不知道是个啥,随后去了解了一下才知道的。
这个方法在render方法执行前被调用。官方不建议用这个方法,所以给它加了一个UNSAFE前缀。官方建议把要在这里面写的内容放到constructor()或者componentDidMount()里面。
另外,这个方法是唯一的服务端渲染钩子。
render()
当调用render的时候,组件会检查props和state并返回下列类型中的一个:
- react元素。
- 字符串或者数字。
- Portals。
- null。(不渲染)
- Booleans。(不渲染)
- react.Fragment。
UNSAFE_componentWillReceiveProps()
在下列三种情况下,会调用UNSAFE_componentWillReceiveProps方法,但是官方不建议使用这个方法,官方建议使用static getDerivedStateFromProps方法。
- 组件的props发生改变。
- 父组件发生重新渲染。
需要注意的是,在初始化props的时候并不会调用这个方法,this.setState()也不会触发这个方法。
UNSAFE_componentWillUpdate()
这个方法会在接受新props和state之后调用。官方不建议在里面调用setState(),要使用的话,建议在getDerivedStateFromProps方法里面使用。
具体使用方法和注意事项请看https://www.cnblogs.com/yangzhou33/p/8799278.html和https://www.imooc.com/article/27954?block_id=tuijian_wz;
moment处理时间的插件。
使用方法:
npm install moment --save # npm
日期格式化
moment().format('MMMM Do YYYY, h:mm:ss a'); // 九月 16日 2019, 10:41:27 上午
moment().format('dddd'); // 星期一
moment().format("MMM Do YY"); // 9月 16日 19
moment().format('YYYY [escaped] YYYY'); // 2019 escaped 2019
moment().format(); // 2019-09-16T10:41:27+08:00
相对时间
moment("20111031", "YYYYMMDD").fromNow(); // 8 年前
moment("20120620", "YYYYMMDD").fromNow(); // 7 年前
moment().startOf('day').fromNow(); // 11 小时前
moment().endOf('day').fromNow(); // 13 小时内
moment().startOf('hour').fromNow(); // 41 分钟前
日历时间
moment().subtract(10, 'days').calendar(); // 2019年9月6日
moment().subtract(6, 'days').calendar(); // 上周二上午10点41
moment().subtract(3, 'days').calendar(); // 上周五上午10点41
moment().subtract(1, 'days').calendar(); // 昨天上午10点41分
moment().calendar(); // 今天上午10点41分
moment().add(1, 'days').calendar(); // 明天上午10点41分
moment().add(3, 'days').calendar(); // 本周四上午10点41
moment().add(10, 'days').calendar(); // 2019年9月26日
具体使用方法及API请看moment官网:http://momentjs.cn/
设置代理的方法proxy
Proxy用于修改某些操作的默认行为,也可以理解为在目标对象之前架设一层拦截,外部所有的访问都必须先通过这层拦截,因此提供了一种机制,可以对外部的访问进行过滤和修改。这个词的原理为代理,在这里可以表示由它来“代理”某些操作,译为“代理器”。
"proxy": {
"/zzsj-dxgs": {
"target": "http://10.25.111.75:8080/",
"pathRewrite": { "^/zzsj-dxgs": "/zzsj-dxgs" },
"changeOrigin": true
},
"/zzsj-dxgs-image": {
"target": " http://10.25.111.75:8080/",
"pathRewrite": { "^/zzsj-dxgs-image": "/zzsj-dxgs-image" },
"changeOrigin": true
}
},
"theme": {
"primary-color": "#0b1c8c"
}
}
React-hooks
你还在为该使用无状态组件(Function)还是有状态组件(Class)而烦恼吗?
——拥有了hooks,你再也不需要写Class了,你的所有组件都将是Function。
你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?
——拥有了Hooks,生命周期钩子函数可以先丢一边了。
你在还在为组件中的this指向而晕头转向吗?
——既然Class都丢掉了,哪里还有this?你的人生第一次不再需要面对this。
这样看来,说React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣,或者正在使用react进行项目开发,答应我,请一定抽出至少30分钟的时间来阅读本文好吗?所有你需要了解的React Hooks的知识点,本文都涉及到了,相信完整读完后你一定会有所收获。
具体使用方法及api请看原文地址:https://www.jianshu.com/p/76901410645a
具体使用请看:https://www.cnblogs.com/kdcg/p/9145385.html;
Cesium
CesiumJS是一个开放源代码的JavaScript库,用于世界一流的3D地球仪和地图。我们的任务是创建领先的3D地球和静态和时动态内容的地图,以实现最佳性能,精度,视觉质量,平台支持,社区和易用性。
具体使用:https://cesiumjs.org/about/
SuperMap
SuperMap iClient JavaScript 10i 是云 GIS 网络客户端开发平台。基于现代 Web 技术栈全新构建,是 SuperMap 云 GIS 和在线 GIS 平台系列产品的统一 JavaScript 客户端。集成了领先的开源地图库和可视化库,且核心代码以 Apache License 2.0 协议完全开源,连接了 SuperMap 与开源社区。提供了全新的大数据可视化和数据流可视化功能,通过本产品可快速实现浏览器和移动端上美观、流畅的地图呈现与空间分析。
具体使用:http://iclient.supermap.io/
openlayer
OpenLayers使在任何网页中放置动态地图变得容易。它可以显示从任何来源加载的地图图块,矢量数据和标记。OpenLayers的开发旨在进一步利用各种地理信息。它是完全免费的开源JavaScript,根据2条款BSD许可(也称为FreeBSD)发布。
结语
今天就总结这些,以后如果还有会继续总结。