- 博客(190)
- 收藏
- 关注
RSS订阅原创 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
5961
5
原创 Ant Design Pro V5精讲（基础篇九）：TypeScript入门
解决什么技术痛点？ JavaScript是一门灵活的编程语言，但它的缺陷是没有类型约束，隐藏类型转换，var的作用域问题等，在编程中我们有一个共识：错误出现的越早越好（写代码出错比代码编译出错好，代码编译出错比代码运行期间出错好，开发阶段出错比测试期间发现错好）。由于JavaScript无法在代码编译阶段发现类型错误，造成了我们前端开发人员类型思维的缺失，为了解决这个技术特点，TypeScript出现了，从它的命名就可以知道，它是一个类型系统.，如果是JavaScript是一个动态类型检查机制，那...
2021-07-08 02:08:32
1236
原创 Ant Design Pro V5精讲（基础篇八）：useRef
应用场景 获取组件的实例，例如父组件需要调用子组件的方法时。 获取DOM对象，即用于绑定某些DOM，监听组件的事件 函数组件中的全局变量，跨渲染周期保存数据，即组件被多次渲染之后依旧不变的属性，state不能存储跨渲染周期的数以后在，因为state的一旦修改了它，就会造成组件的重新渲染，而useRef不会重新引起渲染。特性useRef返回一个可变的ref对象，其.currentn履性被初始化为传入参数（initalValue)。返回的ref对象在组件的生命周期内保持不变。 c...
2021-07-04 04:36:01
1553
原创 Ant Design Pro V5精讲（基础篇七）：useMemo和useCallback
需求场景 有时候一些计算可能比较复杂，耗时比较长，或者由于函数组件本身是没有mount和update之分，即只要调用setState，就会触发组件的重新渲染，无论前后state的值是否不同。另外父组件更新，子组件也会自动的更新。为了性能考虑，如何对于一些函数，或者状态做一些控制，这些函数或者状态只能满足某些条件（即在某些数据发生变化后）才去执行这些函数的计算，而不是每次组件渲染都去执行，影响性能，其实大部分情况由于react的效率比较高，暂时可以不考虑性能问题，有需要时，再去优化也不迟。u...
2021-07-04 03:48:24
1022
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
655
原创 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
1080
原创 Ant Design Pro V5精讲（基础篇四）：useEffect
背景 useEffect翻译过来就是副作用函数（建议用英文名，不翻译，更好理解）类组件有各个生命周期，我们喜欢把业务逻辑写在各个生命周期函数中，而函数组件是通过useEffect来实现componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合，优势就是改变原来需要在各个生命周期写业务逻辑的习惯，有时候是重复的。特性每次渲染后才执行，并且如果不配第二个参数 忘记组件的生命周期函数，通过第二个参数的变化实现不同的功...
2021-07-03 02:21:35
1721
原创 Ant Design Pro V5精讲（基础篇三）：useState
React Hooks背景 一门技术的出现，一定是为了解决相应的痛点，在React Hooks（不翻译成什么钩子函数，就叫英语名更好理解）没有出现前，一般的做法就是一个大的系统的UI由各个独立的小型UI，实现组件的复用。但经常碰到这些组件业务逻辑代码无法分离，这时候Hook出现了，它在不编写Class页面组件的情况下，可以使用State以及其他的React特性。小结：让函数组件具有了state功能，同时改变了按组件的生命周期写业务功能的编程思想。useState应用场景 以前我们...
2021-07-03 01:15:28
1934
原创 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
472
原创 Ant Design Pro V5精讲（基础篇二）：React入门
一、引用的目标单元格是相对当前单元格来进行计算的，这里有一个相对的概念例如：引用A1指这个父单元格所在列各个单元格依次引用A1,A2,A3....：二 目标单元格和当前单元同行或同列：二、目标单元格和当前单元不同行或不同列：一般其多个单元格的值，之间用逗号隔开。目标格获取原则由上面的例子可以看出，UReport2 中单元格表达式在取目标格值时，优先考虑的是目标格是否与其位于同一行或列，如果是则取与其位于同一行或列的目标单元格，如果不是，则取与当前单元格有共同父格的所有目标单元格，如果他们有共.
2021-07-02 14:10:26
1497
原创 Ant Design Pro V5开发系列：（一）vscode常用技巧整理
1.vscode顶部如何显示当前文件完整的路径信息（为了看到自己打开是）？
2021-06-21 02:38:13
1051
原创 团队开发代码版本git分支工作流程规划（个人总结性推荐）
一、问题背景 在日常团队开发过程中，对代码的版本管理显示日常重要，最终发布上线是工作二、
2021-06-07 22:08:32
845
原创 关于数据库工具SQLyog无法执行保存带有表情的sql
一、概述： 数据库在创建时，已经设置字符集为uft8mb4和utf8mb4_general_ci，检查geu二、解决办法：
2021-06-03 22:13:57
746
原创 编码规范：用const和let去代替var的编码习惯
一、概述 ECMAScript6 出来let和const就是为了解决原来var的痛点： 1.
2021-05-28 02:09:58
561
原创 工具类：js-cookie的使用
一、概述 js-cookie是一个简单的，轻巧的Javascript Api工具，用于处理Cookie的存取值。二
2021-05-28 01:47:47
796
原创 工具类：登录密码的加解密（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
762
原创 ProComponents(适用于中后台的页面系列组件)学习: 高级布局组件ProLayout(五）
一、概述 适用于中后台的一种布局方案，即左边是菜单，右边是内容，它经常与PageContainer 配合使用，自动生成页面标题、面包屑，集成了页脚工具栏。二、ProLayout - 高级布局主要特性：1.动态从服务器取得菜单项;2.底部加页脚（公司版权信息）;3.IconFont的使用： iconfontUrl="//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js"三、代码示例：<ProLayout style={{...
2021-05-20 09:10:12
2525
原创 ProComponents(适用于中后台的页面系列组件)学习: 其它常用组件
一、页面水印组件：WaterMark ，根据需要是否给每个页面增加水印。二、卡片组件：ProCard 高级卡片，，用来增加效果。三、指标卡组件：StatisticCard 指标卡，经常用在页面上，常用于我的桌面，或者一些统计分析界面。四、骨架屏组件：ProSkeleton，类似进度条效果，用户有一个过渡，增强用户体验。五、ProField 原子组件：统一 ProForm、ProTable、ProList、Filter 等组件里面的字段定义。...
2021-05-20 08:58:33
1730
原创 ProComponents(适用于中后台的页面系列组件)学习: 查看页面组件ProDescriptions（四）
一、概述 主要为实现数以后在信息项的查看功能，简化做查看页面，这时候就要用到ProDescriptions组件。 （1）我们可以整个查看页面，来自远程服务的数据（例如数据库的）这时候可以整体设置ProDescriptions的request属性 + ProDescriptions.Item dataIndex。 （2）我们可以单独设置每个查看项的，通过：ProDescriptions.Item （3）也可以通过请求接口数据和 columns来展现，我...
2021-05-20 08:40:55
2530
2
原创 ProComponents(适用于中后台的页面系列组件)学习: 添加或修改页面组件（三）
一、概述 一个添加或者修改页面，通常包括： 页面标题、面包屑、表单，表单验证、固定底部的按纽栏等。这就涉及到：PageContainer页面容器组件+ProForm高级表单组件+ProFormFields 表单项（或者ProFormList、ProFormFieldSet、ProFormDependency ）。还有一些特殊的表单页面：例如Json来生成表单，则用SchemaForm，筛选条件的表单QueryFilter / LightFilter，分步操作的表单StepsForm、浮层弹...
2021-05-20 08:13:06
2844
原创 ProComponents(适用于中后台的页面系列组件)学习: 重型列表页面组件（二）
一、概述 一个列表页面一般包括：页面的标题、面包屑（即页面路径）、页面的tab标签（可选）、工具栏按纽、表格（带高级搜索，排序等功能）、底部悬浮操作栏等。这就需要用到： （1）页面容器组件PageContainer： 自带标题、面包屑、tab标签栏、右上角公用操作按纽栏、底部按纽操作栏。 （2）高级表格组件ProTable: 自带搜索查询（高级查询）、表格分页、排序、列设置、刷新、全屏等功能及与服务端交互的能力。三、代码重点分析：（1）页面...
2021-05-20 07:49:09
1728
原创 ProComponents(适用于中后台的页面系列组件)学习:设计理念（一）
ProComponents(适用于中后台的页面系列组件)学习:设计理念（一） 热水 2021.19 北京 个人QQ:28582157ProComponents官方地址：https://procomponents.ant.design/docs/intro一、前言： 传统...
2021-05-19 23:04:10
1339
1
原创 回顾：oauth2和 spring cloud alibaba gateway 整合
一、oauth2认证中心：登录用户进行认证，生成token, 同时定义受保护的api服务（一）oauth2的四种认证模式：授权码模式，简化模式，密码模式，客户端模式。其中授权码模式和密码模式用的最多。 A.OAuth2授权码模式： 我们进入一些第三方应用程序时，无需注册，只需要微信授权登录即可，对于我们的服务不需要存储用户的密码，只要存储认证平台返回的唯一ID和用户信息即可，这就是OAuth2常见的授权码模式,它的特点就是：利用第三方权威平台实现用户身份的认证，当然如果我们的公司里面很多微...
2021-05-15 21:41:41
1727
2
原创 React 自定义Hooks
一、自定义hooks的意义： （1）将多个组件都要用到的逻辑相同的功能片段，单独封成一个单函函数来使用，这个函数必须以use命名开头，这样react才认识它是自定义hooks函数，还是组件？ （2）自定义函数定位偏向实现功能，而组件偏向于界面和业务逻辑。 （3） React内置的hooks函数解决了函数组件无法使用state，以及传统写法中生命周期函数混乱和this指向的问题，但没有解决组件复用性的提升。 （4） 组件复用的提升是由自定义hooks来体...
2021-05-11 08:24:19
1182
原创 React useRef的应用场景思考
一、useRef的应用场景： 1.函数组件访问dom元素; 2.函数组件访问之间渲染的变量。二、用法：每次渲染useRef返回值都不变； ref.current发生变化并不会造成re-render; ref.current发生变化应该作为Side Effect（因为它会影响下次渲染），所以不应该在render阶段更新current属性。...
2021-05-11 01:01:42
2733
原创 React useState和useReducer不同的应用场景思考
一、useState和useReducer都是用来管理state的，useReducer更多的时候与useContext搭配起来用。 useState： 原来的类组件只支持一个setState方法，useState把各个状态独立分开管理，提供了更细的粒颗度模块化管理。 useReducer： 是阉割版的 redux，只缺省一个状态的共享能力，与useContext 搭配刚刚好。useReducer适合局部数据流。其实useState是useReducer的一个子集，useState 返回...
2021-05-11 00:49:57
2746
原创 React useMemo和useCallback都是为了提升性能的hooks（各自应用场景思考）
一、共同点：而 useMemo 和 useCallback 可以用来解决函数组件更新过程中的性能问题。useMemo 和 useCallback 都会在组件第一次渲染的时候执行，之后会在其依赖的变量发生改变是再次执行。并且这两个 hooks 都是返回缓存的值。useMemo 返回的是缓存的变量，而 useCallback 返回的是缓存的函数。即：为了避免父组件的props或者state改变，让它的子组件每次均要刷新（前提是父组件的发生变化props或者state可能和子组件的无关），这时候就需要
2021-05-11 00:00:23
1113
1
原创 React useContext和传统的props传参二种方法的思考
一、useContext （一）useContext的应用场景： 我的理解适合两种场景： 1.全局状态的定义，即可以被不同层级的组件所需要。 2.多个组件之间传参（他们之间可能是跨多层级即祖孙关系传参）时。 如果普通的父子组件之间传参，即父子组只有单纯的一层时，用props传参更省事，useContext反而不是最佳的选择，官方也是这样推荐的（建议用组合组件来完成传参）。 （二）useContext的用法： 步骤一...
2021-05-10 23:25:33
1758
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
16810
原创 对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
1655
原创 Ant Design Pro V5 修改缺省的页脚内容
1.在app.tsx中定义了页脚子组件，如下：2.找到src/components/Footer子组件，然后修改里面的内容例如即可：
2021-04-22 22:39:26
609
原创 Ant Design Pro V5版本去掉国际化
找到这个文件，把layout中的locale: true，改为false，就去掉了国际化支持。
2021-04-22 21:16:03
1708
原创 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
539
原创 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
863
原创 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
357
原创 开源UReport 整合到产品中实践简要：（七）ureport设计器设计报表前基本功知识-表达式与函数
一、ureport中表达式（其实也包含了函数，函数也是在表达式进行定义）（1）基本表达式类型：数字（含小数位支持），字符串，布尔值（2）支持加减乘除，求余数（%）。（三）三元表达式：可以看到，和普通的三元表达式一样，它的第一部分是条件部分，条件部分可以有多个条件（用and或or连接），“？”后面是条件满足后执行并返回的表达式部分，“：”后面则是条件不满足时执行返回的表达式部分。（四）if用法：if(A1>1000 and A1<20000){ret...
2021-02-05 23:35:20
2726
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人