时间格式 2020-06-02T16:00:00.000Z

function formatDate(datetime) {
  const addDateZero = (num) => {
    return (num < 10 ? "0" + num : num);
  };
  const d = new Date(datetime);
  const f = d.getFullYear() + '-'
    + addDateZero(d.getMonth() + 1) + '-'
    + addDateZero(d.getDate()) + ' '
    + addDateZero(d.getHours()) + ':'
    + addDateZero(d.getMinutes()) + ':'
    + addDateZero(d.getSeconds());
  return f;
}
formatDate('2020-06-02T16:00:00.000Z')
"2020-06-03 00:00:00"

获取浏览器URL地址

//获取的是浏览器hash路由地址
window.location.hash;
//或者可以用
window.location.pathname;

改变页面内容关闭页签时触发：

window.onbeforeunload=function () {
  return '离开此网站';
};

定时步骤条

test(){
  for(let i=0;i<=3;i++){
    i++;
    if(i===1){
      setTimeout(() => {
        this.setState({
          current:1
        })
      }, 2000);
    }else if(i===2){
      setTimeout(() => {
        this.setState({
          current:2
        })
      }, 2000);
    }else if(i===3){
      setTimeout(() => {
        this.setState({
          current:3
        })
      }, 3000);
    }
    
  }

}

DVA

dva是纯碎的数据流

原始的父子组件传值，子组件传值给父组件可以通过回调，父组件向子组件传值可以通过属性传值或方法注入

较之状态流的数据传递方案其优点：

组件化需要耦合部分固定的state，因为它是复用的。
很多属性的操作，其实并不需要改变state，react的state操作是会触发组件的重新渲染的，耗费性能和额外的不必要的刷新。

redux和dva解决的问题

redux或dva ：其实只解决了一个问题，就是组件state的订阅，基于这个订阅，它把数据的变化放在中间层去处理。

在基于state的变化时，则会从redux或者dva的这种订阅收益。

中间层的数据处理代码们本身是可复用的
多个被订阅的页面可以复用数据处理逻辑
跨组件更新时作为一个轮子

Dva数据流

View层操作 –> 触发models层effect中方法 –> 触发service层请求，获取后台数据 –> 触发model层处理相应数据的方法，存储至reducer中 –> 更新model层中state –> 触发view层的render方法进行重新渲染 –> 页面更新

UMI

这块内容是为了给自己看的，和官网一样，大家可以去官网看。

umijs.org/

umi 可以简单地理解为：roadhog + 路由 + HTML 生成 + 完善的插件机制

roadhog：基于 webpack 的封装的cli工具，提供 server、 build 和 test 三个命令，分别用于本地调试和构建，并且提供了特别易用的 mock 功能。

特点：

开箱即用，内置react，react-router等
开发启动快，支持一键开启 dll 等

dll: 通过 webpack 的 dll 插件预打包一份 dll 文件来达到二次启动提速的目的。

兼容IE9
约定式路由，同时支持可配置路由
完善的插件体系
支持typescript
支持dva数据方案

实现 useActive

利用 Hooks 的 API，可以在组件渲染完毕后利用 useEffect 判断组件是否 Active，并利用 useState 存储这个状态：

export function useActive(domId: string) {
  // 所有元素默认 unActive
  const [active, setActive] = React.useState(false);
  React.useEffect(() => {
    const visibleObserve = new VisibleObserve(domId, "rootId", setActive);
    visibleObserve.observe();
    return () => visibleObserve.unobserve();
  }, [domId]);
  return active;
}

配置config文件

CSS支持字符串

原因是工作中会用到对象引入写法，但是有时候会需要字符串写多个，就可以在config文件中配置以下内容。

export default {
  //配置css支持字符串写法
  cssLoaderOptions:{
    localIdentName:'[local]'
  },

};

支持dva

在 umi@3 中要使用 dva 的功能很简单，只要使用安装 @umijs/plugin-dva 并在配置文件中开启 `dva` 配置。

yarn add @umijs/plugin-dva

如果提示 dva 不是约定的配置，说明你没有装 @umijs/plugin-dva ，如果你 dva 没有生效，可能是你配置没开启

教程在前面使用 create-umi-app 初始化项目时，依赖了 @umijs/preset-react ，这是一个插件集，你无需再而外安装 plugin-dva ，只需要再配置中开启即可。

打开 umi 的配置文件：config.js

export default {
  singular: true,
  plugins: [
    ['umi-plugin-react', {
      //支持antd使用
      antd: true,
      //支持dva 加入下面依据代码才可会解析model层
      dva: {
        immer: true
      },
      locale: {
        enable: true,
      },
    //打包后名字按照有意义的名字命名 
      dynamicImport: {
          webpackChunkName: true,
        },
    }],
  ],
}

本文章是为了记录工作中小知识点而写，当然，这些问题也许会用到面试当中。

有能帮助到大家的可以收藏，会不定期更新新内容。

欢迎阅读者可多加指点和修正...

前端工作问题积累