热水钟博客

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

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

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

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

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

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

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

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

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，翻译过来它

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

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

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

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

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

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

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

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

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

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

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