热水钟博客

用户需求 登录界面改造成自己的 主界面的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，翻译过来它

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

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

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

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

一、概述 适用于中后台的一种布局方案，即左边是菜单，右边是内容，它经常与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来展现，我...

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

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

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

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

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

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

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

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

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

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

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

把这段注释掉就行了。

把数组中的注释掉即可：

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

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

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

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...

一、概述 建议crud用ProComponents来开发，这样的效率更高一些，不管是umi hooks还是ahooks中的表格，表单等功能，不如它强大，它主要包含以下组件：ProLayout解决布局的问题，提供开箱即用的菜单和面包屑功能 ProTable表格模板组件，抽象网络请求和表格格式化 ProForm表单模板组件，预设常见布局和行为 ProCard提供卡片切分以及栅格布局能力 ProDescriptions定义列表模板组件，ProTable 的配套组件 ProSke...

一、useAntdTable（与ant design 中的antdTable控件配合） 二、useFusionTable:（与普通的table控件配合）三、useTable（带有插件功能，满足九个场景应用）

一、useRequet是什么 一个强大的异步数据请求特殊函数。二、API说明：const {data,error,loading,run,params,cancel,refresh,mutate,fetches,} = useRequest(service, {manual,initialData,refreshDeps,onSuccess,onError,formatResult,cacheKey,loadingD...

一、ahooks比umi hooks功能强大，所以不研究umi hooks，直接研究ahooks // 安装依赖： npm i ahooks --save 或者tyan add ahooks // 使用hooks import { useRequest} from 'ahooks';二、ahooks api开发规范API 规范这是 ahooks 的 API 规范文档。返回值1. 无输出允许 Hooks 无输出，一般常见于生命周期类 Ho...

一、为什么要自定义Hook 将组件逻辑提到可重用的函数中，然后这些函数供它的Hook使用，或者函数组件使用，最终目的是形成公用的Hook库。 最终根据不同的场景开发自定义不同类型的Hook.二、函数名必须为"use"开头，在函数内部可以调用其它的hook（例如:useState,useEffect) 例子：import { useState, useEffect } from 'react';function useFriendStatus(friendID...

一、两个强制性规则： (一）只在最顶层使用 Hook 记住别在循环，条件或嵌套函数中定义即可，因为hook它必须按顺序执行，它对state的控制才正确。（二）只在 React 函数中调用 Hook： 不要在普通的 JavaScript 函数中调用 Hook，即只能在React的函数组件中调用，另外也可以在自定义hook中调用其它的hook. 二、安装ESLink插件：为了保证Hook开发中符合以上2个规则要求，可以在开发工具中安装：eslint-...

一、了解Effect Hook之前，先补一下React组件的生命周期React组件的生命周期分为三个阶段： 组件初始化 Mounting（也可以mount这个单词翻译为组件安装) 组件运行时 Updating 组件卸载时 Unmounting Mounting — 组件初始化 constructor()：组件被创建时，首先被调用的方法，通常用来初始化组件state以及绑定事件处理方法，该方法中不能调用setState()，该构造方法接受一个props参数，必须在方