项目中使用到的新技术（以前未接触过的）

最新推荐文章于 2022-06-02 10:51:06 发布

崽崽的谷雨

最新推荐文章于 2022-06-02 10:51:06 发布

阅读量1k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/weixin_44058725/article/details/100878283

版权

React 专栏收录该内容

77 篇文章 8 订阅

订阅专栏

从上家公司，来到新的公司，接手了一个新的项目（项目很复杂庞大）。刚接手时，完全是懵逼状态的，项目要求，及业务逻辑完全不知道，甚至连用到的技术，都不知道，以至于我看了一星期代码任何头绪都没有。所以整理了一下，项目中遇到的新技术。

项目中的新技术总结

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）发布。

具体使用：https://openlayers.org/

结语

今天就总结这些，以后如果还有会继续总结。

崽崽的谷雨

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
项目中使用到的新技术（以前未接触过的）

从上家公司，来到新的公司，接手了一个新的项目（项目很复杂庞大）。刚接手时，完全是懵逼状态的，项目要求，及业务逻辑完全不知道，甚至连用到的技术，都不知道，以至于我看了一星期代码任何头绪都没有。所以整理了一下，项目中遇到的新技术。项目中的新技术总结1.使用的框架是dva.js+react,的轻量级框架（注意是框架而不是插件及dva-cli）这个框架我从来到，这个公司之前都没接触...
复制链接

扫一扫