自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

热水钟博客

人生是旅行,技术研究与基于产品化下研发是一种修行。

  • 博客(190)
  • 收藏
  • 关注

原创 Ant Design Pro V5精讲(实践篇一):自定义登录界面、主界面

用户需求 登录界面改造成自己的 主界面的logo及产品名称改造成自己的 语言包去掉或者只留中英语言包登录界面改造进入pages/user/login目录找到index.tsx// 去掉语言包栏目 <div className={styles.container}> {/** 南极客 2021.5.8 去掉国际化语言支持 <div className={styles.lang}>{SelectLang &&a...

2021-07-08 02:44:52 5892 5

原创 Ant Design Pro V5精讲(基础篇九):TypeScript入门

解决什么技术痛点? JavaScript是一门灵活的编程语言,但它的缺陷是没有类型约束,隐藏类型转换,var的作用域问题等,在编程中我们有一个共识:错误出现的越早越好(写代码出错比代码编译出错好,代码编译出错比代码运行期间出错好,开发阶段出错比测试期间发现错好)。由于JavaScript无法在代码编译阶段发现类型错误,造成了我们前端开发人员类型思维的缺失,为了解决这个技术特点,TypeScript出现了,从它的命名就可以知道,它是一个类型系统.,如果是JavaScript是一个动态类型检查机制,那...

2021-07-08 02:08:32 1227

原创 Ant Design Pro V5精讲(基础篇八):useRef

应用场景 获取组件的实例,例如父组件需要调用子组件的方法时。 获取DOM对象,即用于绑定某些DOM,监听组件的事件 函数组件中的全局变量,跨渲染周期保存数据,即组件被多次渲染之后依旧不变的属性,state不能存储跨渲染周期的数以后在,因为state的一旦修改了它,就会造成组件的重新渲染,而useRef不会重新引起渲染。特性useRef返回一个可变的ref对象,其.currentn履性被初始化为传入参数(initalValue)。返回的ref对象在组件的生命周期内保持不变。 c...

2021-07-04 04:36:01 1537

原创 Ant Design Pro V5精讲(基础篇七):useMemo和useCallback

需求场景 有时候一些计算可能比较复杂,耗时比较长,或者由于函数组件本身是没有mount和update之分,即只要调用setState,就会触发组件的重新渲染,无论前后state的值是否不同。另外父组件更新,子组件也会自动的更新。为了性能考虑,如何对于一些函数,或者状态做一些控制,这些函数或者状态只能满足某些条件(即在某些数据发生变化后)才去执行这些函数的计算,而不是每次组件渲染都去执行,影响性能,其实大部分情况由于react的效率比较高,暂时可以不考虑性能问题,有需要时,再去优化也不迟。u...

2021-07-04 03:48:24 1011 4

原创 Ant Design Pro V5精讲(基础篇六):useReducer

需求场景1.有一些state本身有很多子值,例如一个对象,这时候用useState有点麻烦,因为用户更多关的颗度是这个对象,而不是对象中的某一个属性上,整个state(含子值多个)对外是一个整体。2.有一些state本身依赖之前的state进行逻辑上计算。3.大型组件树时,父组件向子组件传递dipatch,改变父子组件传递回调函数的用法,经常与useContext配合使用完成dispatch函数的作为传值对象,从而实现了简化的redux的功能。语法const [state, dis

2021-07-03 23:57:52 648

原创 Ant Design Pro V5精讲(基础篇五):useContext

解决痛点 当组件树层级很深时,组件之间需要使用同一份数据时,通过组件们提升到父组件中用props传参的方式太过麻烦。应用需求场景1.兄弟组件之间共享state(即同一份数据),useContext适合2.爷孙组件(特别是组件树层级很深时)之间共享state,useContext适合3.父子组件之间共享state,建议用useState+props实现普通父子组件之间传参即可。4.项目工程各个组件全局共享state: 建议用UmiJS的插件@umijs/plugin-initial-.

2021-07-03 03:36:17 1062

原创 Ant Design Pro V5精讲(基础篇四):useEffect

背景 useEffect翻译过来就是副作用函数(建议用英文名,不翻译,更好理解)类组件有各个生命周期,我们喜欢把业务逻辑写在各个生命周期函数中,而函数组件是通过useEffect来实现componentDidMount,componentDidUpdate和componentWillUnmount这三个函数的组合,优势就是改变原来需要在各个生命周期写业务逻辑的习惯,有时候是重复的。特性每次渲染后才执行,并且如果不配第二个参数 忘记组件的生命周期函数,通过第二个参数的变化实现不同的功...

2021-07-03 02:21:35 1704

原创 Ant Design Pro V5精讲(基础篇三):useState

React Hooks背景 一门技术的出现,一定是为了解决相应的痛点,在React Hooks(不翻译成什么钩子函数,就叫英语名更好理解)没有出现前,一般的做法就是一个大的系统的UI由各个独立的小型UI,实现组件的复用。但经常碰到这些组件业务逻辑代码无法分离,这时候Hook出现了,它在不编写Class页面组件的情况下,可以使用State以及其他的React特性。小结:让函数组件具有了state功能,同时改变了按组件的生命周期写业务功能的编程思想。useState应用场景 以前我们...

2021-07-03 01:15:28 1919

原创 Ant Design Pro V5精讲(基础篇一):Virtual DOM技术的出现

1.DOM是什么?DOM,是Document Object Model,翻译过来叫文档对象模型,简称DOM,W3C组织定义的一个抽象化的结构性文本,在开发者眼里它就是HTML Code,通俗叫为HTML DOM(其实也还有XML的内容),HTML中的元素叫elements,对应DOM中的节点叫Nodes。更通俗的理解就是:DOM是HTML在内存中的表现形式,他们均是树型结构,通常使用JavaScript来操作DOM对象。2.Virtual DOM是什么?Virtaul DOM,翻译过来它

2021-07-02 14:13:50 461

原创 Ant Design Pro V5精讲(基础篇二):React入门

一、引用的目标单元格是相对当前单元格来进行计算的,这里有一个相对的概念例如:引用A1指这个父单元格所在列各个单元格依次引用A1,A2,A3....:二 目标单元格和当前单元同行或同列:二、目标单元格和当前单元不同行或不同列:一般其多个单元格的值,之间用逗号隔开。目标格获取原则由上面的例子可以看出,UReport2 中单元格表达式在取目标格值时,优先考虑的是目标格是否与其位于同一行或列,如果是则取与其位于同一行或列的目标单元格,如果不是,则取与当前单元格有共同父格的所有目标单元格,如果他们有共.

2021-07-02 14:10:26 1485

原创 Ant Design Pro V5开发系列:(二)React目录与文件命名规范及代码规范

1. 术语常见的命名规范,分为以下三种:

2021-06-21 02:38:39 2360

原创 Ant Design Pro V5开发系列:(一)vscode常用技巧整理

1.vscode顶部如何显示当前文件完整的路径信息(为了看到自己打开是)?

2021-06-21 02:38:13 1033

原创 团队开发代码版本git分支工作流程规划(个人总结性推荐)

一、问题背景 在日常团队开发过程中,对代码的版本管理显示日常重要,最终发布上线是工作二、

2021-06-07 22:08:32 833

原创 ant design pro v5 国际化多语言包支持分析

一、概述 由于软件主要在国内使用,所二、取消多语言:三、自定义多语言包的支持:

2021-06-05 18:18:33 2469

原创 关于数据库工具SQLyog无法执行保存带有表情的sql

一、概述: 数据库在创建时,已经设置字符集为uft8mb4和utf8mb4_general_ci,检查geu二、解决办法:

2021-06-03 22:13:57 734

原创 编码规范:用const和let去代替var的编码习惯

一、概述 ECMAScript6 出来let和const就是为了解决原来var的痛点: 1.

2021-05-28 02:09:58 558

原创 工具类:js-cookie的使用

一、概述 js-cookie是一个简单的,轻巧的Javascript Api工具,用于处理Cookie的存取值。二

2021-05-28 01:47:47 784

原创 工具类:登录密码的加解密(jsencrypt实现前端RSA非对称加密解密

定义工具类:utils/jsenscrypt.jsimport JSEncrypt from 'jsencrypt/bin/jsencrypt.min'// 密钥对生成 http://web.chacuo.net/netrsakeypairconst publicKey = 'MFwwDQYJKoZIhvcNAQEBBQADSwAwSAJBAKoR8mX0rGKLqzcWmOzbfj64K8ZIgOdH\n' + 'nzkXSOVOZbFu/TJhZ7rFAN+eaGkl3C4buc.

2021-05-28 01:24:39 759

原创 ProComponents(适用于中后台的页面系列组件)学习: 高级布局组件ProLayout(五)

一、概述 适用于中后台的一种布局方案,即左边是菜单,右边是内容,它经常与PageContainer 配合使用,自动生成页面标题、面包屑,集成了页脚工具栏。二、ProLayout - 高级布局主要特性:1.动态从服务器取得菜单项;2.底部加页脚(公司版权信息);3.IconFont的使用: iconfontUrl="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"三、代码示例:<ProLayout style={{...

2021-05-20 09:10:12 2492

原创 ProComponents(适用于中后台的页面系列组件)学习: 其它常用组件

一、页面水印组件:WaterMark ,根据需要是否给每个页面增加水印。二、卡片组件:ProCard 高级卡片,,用来增加效果。三、指标卡组件:StatisticCard 指标卡,经常用在页面上,常用于我的桌面,或者一些统计分析界面。四、骨架屏组件:ProSkeleton,类似进度条效果,用户有一个过渡,增强用户体验。五、ProField 原子组件:统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。...

2021-05-20 08:58:33 1715

原创 ProComponents(适用于中后台的页面系列组件)学习: 查看页面组件ProDescriptions(四)

一、概述 主要为实现数以后在信息项的查看功能,简化做查看页面,这时候就要用到ProDescriptions组件。 (1)我们可以整个查看页面,来自远程服务的数据(例如数据库的)这时候可以整体设置ProDescriptions的request属性 + ProDescriptions.Item dataIndex。 (2)我们可以单独设置每个查看项的,通过:ProDescriptions.Item (3)也可以通过请求接口数据和 columns来展现,我...

2021-05-20 08:40:55 2498 2

原创 ProComponents(适用于中后台的页面系列组件)学习: 添加或修改页面组件(三)

一、概述 一个添加或者修改页面,通常包括: 页面标题、面包屑、表单,表单验证、固定底部的按纽栏等。这就涉及到:PageContainer页面容器组件+ProForm高级表单组件+ProFormFields 表单项(或者ProFormList、ProFormFieldSet、ProFormDependency )。还有一些特殊的表单页面:例如Json来生成表单,则用SchemaForm,筛选条件的表单QueryFilter / LightFilter,分步操作的表单StepsForm、浮层弹...

2021-05-20 08:13:06 2811

原创 ProComponents(适用于中后台的页面系列组件)学习: 重型列表页面组件(二)

一、概述 一个列表页面一般包括:页面的标题、面包屑(即页面路径)、页面的tab标签(可选)、工具栏按纽、表格(带高级搜索,排序等功能)、底部悬浮操作栏等。这就需要用到: (1)页面容器组件PageContainer: 自带标题、面包屑、tab标签栏、右上角公用操作按纽栏、底部按纽操作栏。 (2)高级表格组件ProTable: 自带搜索查询(高级查询)、表格分页、排序、列设置、刷新、全屏等功能及与服务端交互的能力。三、代码重点分析:(1)页面...

2021-05-20 07:49:09 1696

原创 ProComponents(适用于中后台的页面系列组件)学习:设计理念(一)

ProComponents(适用于中后台的页面系列组件)学习:设计理念(一) 热水 2021.19 北京 个人QQ:28582157ProComponents官方地址:https://procomponents.ant.design/docs/intro一、前言: 传统...

2021-05-19 23:04:10 1316 1

原创 回顾:oauth2和 spring cloud alibaba gateway 整合

一、oauth2认证中心:登录用户进行认证,生成token, 同时定义受保护的api服务(一)oauth2的四种认证模式:授权码模式,简化模式,密码模式,客户端模式。其中授权码模式和密码模式用的最多。 A.OAuth2授权码模式: 我们进入一些第三方应用程序时,无需注册,只需要微信授权登录即可,对于我们的服务不需要存储用户的密码,只要存储认证平台返回的唯一ID和用户信息即可,这就是OAuth2常见的授权码模式,它的特点就是:利用第三方权威平台实现用户身份的认证,当然如果我们的公司里面很多微...

2021-05-15 21:41:41 1700 2

原创 React 自定义Hooks

一、自定义hooks的意义: (1)将多个组件都要用到的逻辑相同的功能片段,单独封成一个单函函数来使用,这个函数必须以use命名开头,这样react才认识它是自定义hooks函数,还是组件? (2)自定义函数定位偏向实现功能,而组件偏向于界面和业务逻辑。 (3) React内置的hooks函数解决了函数组件无法使用state,以及传统写法中生命周期函数混乱和this指向的问题,但没有解决组件复用性的提升。 (4) 组件复用的提升是由自定义hooks来体...

2021-05-11 08:24:19 1181

原创 React useRef的应用场景思考

一、useRef的应用场景: 1.函数组件访问dom元素; 2.函数组件访问之间渲染的变量。二、用法:每次渲染useRef返回值都不变; ref.current发生变化并不会造成re-render; ref.current发生变化应该作为Side Effect(因为它会影响下次渲染),所以不应该在render阶段更新current属性。...

2021-05-11 01:01:42 2719

原创 React useState和useReducer不同的应用场景思考

一、useState和useReducer都是用来管理state的,useReducer更多的时候与useContext搭配起来用。 useState: 原来的类组件只支持一个setState方法,useState把各个状态独立分开管理,提供了更细的粒颗度模块化管理。 useReducer: 是阉割版的 redux,只缺省一个状态的共享能力,与useContext 搭配刚刚好。useReducer适合局部数据流。其实useState是useReducer的一个子集,useState 返回...

2021-05-11 00:49:57 2729

原创 React useMemo和useCallback都是为了提升性能的hooks(各自应用场景思考)

一、共同点:而 useMemo 和 useCallback 可以用来解决函数组件更新过程中的性能问题。useMemo 和 useCallback 都会在组件第一次渲染的时候执行,之后会在其依赖的变量发生改变是再次执行。并且这两个 hooks 都是返回缓存的值。useMemo 返回的是缓存的变量,而 useCallback 返回的是缓存的函数。即:为了避免父组件的props或者state改变,让它的子组件每次均要刷新(前提是父组件的发生变化props或者state可能和子组件的无关),这时候就需要

2021-05-11 00:00:23 1104 1

原创 React useContext和传统的props传参二种方法的思考

一、useContext (一)useContext的应用场景: 我的理解适合两种场景: 1.全局状态的定义,即可以被不同层级的组件所需要。 2.多个组件之间传参(他们之间可能是跨多层级即祖孙关系传参)时。 如果普通的父子组件之间传参,即父子组只有单纯的一层时,用props传参更省事,useContext反而不是最佳的选择,官方也是这样推荐的(建议用组合组件来完成传参)。 (二)useContext的用法: 步骤一...

2021-05-10 23:25:33 1751 2

原创 React hooks useEffect中如何使用异步函数(即如何使用async/await)

1. useEffect的回调参数返回的是一个清除副作用的clean-up函数。因此无法返回Promise,更无法使用async/await2.如何让useEffect支持async/await2.1、方法一(推荐):useEffect中异步函数采用IIFE写法(Immediately Invoked Function Expression即立即调用的函数式表达式)const MyFunctionnalComponent: React.FC = props => { us...

2021-04-29 12:10:12 16624

原创 对React Hooks(useState和useEffect) 的总结思考

一、为什么用React Hooks Hooks是React16.8版本后新增加的特性,目的是让你用函数组件的写法代替原来的类组件写法,同时让函数组件支持state,同时用useEffect代替原来的生命周期的业务功能编写代码风格,目的就是解决原来用class写组件的痛点,痛点有哪些自行查阅资料。二、useState理解: 1.useState是异步的,定义方法(语法叫数组解构写法),例如:// 声明一个叫 “count” 的 state 变量 const [cou...

2021-04-28 21:19:17 1642

原创 Ant Design Pro V5 修改缺省的页脚内容

1.在app.tsx中定义了页脚子组件,如下:2.找到src/components/Footer子组件,然后修改里面的内容例如即可:

2021-04-22 22:39:26 605

原创 ant design pro v5去掉右边content区域的水印

把这段注释掉就行了。

2021-04-22 22:14:42 1948 2

原创 ant desing pro V5 去掉菜单底部那2个链接 openApi文档和业务组件文档

把数组中的注释掉即可:

2021-04-22 21:41:02 1205

原创 Ant Design Pro V5版本去掉国际化

找到这个文件,把layout中的locale: true,改为false,就去掉了国际化支持。

2021-04-22 21:16:03 1686

原创 react面试:react diff算法的演化(三)

react的diffi算法一直优化升级,现在又改为链表方式,diffi算法核心就是对比和修改,它的工作原理据于以下两条需求:两个不同类型的元素将产生两个不同的树; 同一级的一组子节点,可以从中埋入一个key属性用于区分;一、传统的diff算法是两棵树进行循环比较,那么它的比较次数就是O(n^2),n*n。二、React 15的Diff算法,针对以上两个需求,它有三种策略: (一)Tree Diff算法:Tree Diff 是两颗新旧虚拟树按照层级对应关系,把同一父节点的同一层级的节点遍.

2021-04-22 02:15:39 530

原创 react面试:基础知识(二)React生命周期与React17版本后的生命周期区别

一、React16.4之前的生命周期:(一)初始化initalization:通过构造函数来实现,同时继承React基类,这样才能有render方法等方法,这就是为什么函数组件不能使用这些方法的原因,例如:只要使用了constructor()就必须写super(),否则会导致this指向错误,pops指父组件的props注入子组件,这可以地方还可以定义this.state的初始化内容:import React, { Component } from 'react';class Test e

2021-04-22 01:27:59 856

原创 react面试:基础知识(一)

1. 什么是虚拟DOM 答:相对真实的DOM,它是真实DOM的内存表示,同步了虚拟DOM,react的diff算法自动同步真实的DOM。2. 类组件和函数组件的区别?类组件定义:class Welcome extends React.Component { render() { return ( <h1>Welcome { this.props.name }</h1> ); }}ReactDOM.render(<W...

2021-04-22 00:39:29 352

原创 开源UReport 整合到产品中实践简要:(七)ureport设计器设计报表前基本功知识-表达式与函数

一、ureport中表达式(其实也包含了函数,函数也是在表达式进行定义)(1)基本表达式类型:数字(含小数位支持),字符串,布尔值(2)支持加减乘除,求余数(%)。(三)三元表达式:可以看到,和普通的三元表达式一样,它的第一部分是条件部分,条件部分可以有多个条件(用and或or连接),“?”后面是条件满足后执行并返回的表达式部分,“:”后面则是条件不满足时执行返回的表达式部分。(四)if用法:if(A1>1000 and A1<20000){ret...

2021-02-05 23:35:20 2669

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除