hole_diss的博客

React页面增加代码可读性高，老页面、初级页面的基础优化。

本文介绍了四种解决tabs切换导致数据请求问题的方案：1）使用唯一标识验证请求有效性；2）采用防抖机制降低请求频率；3）在组件卸载时取消未完成请求；4）通过Map缓存各tab数据避免重复请求。每种方案均提供React代码示例，涵盖请求标识验证、防抖处理、组件生命周期控制和数据缓存等关键技术点。这些方法能有效处理tabs切换时的数据请求异常，解决请求竞争和重复加载问题。

antd table表格字段明细展示，属于比较小的需求，但是也有一定交互细节，本文选取部分场景。

本文介绍了图片上传时遇到的数据转化问题

前端批量请求与数据处理的优化方案 摘要：本文介绍了前端批量请求接口的优化方案，包括： 使用Promise.allSettled处理批量异步请求，比Promise.all更能直观获取成功/失败结果 通过参数穿透技术，将请求参数与响应数据关联，解决快速切换和数据唯一性问题 实现图片批量上传与数据处理流程：串行上传图片→获取URL→并行请求多个数据接口→合并结果 提供完整的代码示例，包含错误处理、加载状态管理和数据合并逻辑 这些方案适用于需要批量处理接口请求、数据组装的前端场景，可以有效优化接口调用流程和数据管理

:nth-child()：只看元素在所有子元素中的位置序号不考虑元素类型:nth-of-type()：先过滤出同类型元素然后在这些同类型元素中按位置选择

cubic-bezier() 函数定义了一个贝塞尔曲线(Cubic Bezier)语法：cubic-bezier(x1,y1,x2,y2)

js算法基础, 每个重要逻辑思路，做一下列举。

当一个 HTML 元素将 display 属性设置为 grid 或 inline-grid 后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素。

前序遍历、中序遍历、后序遍历、层序遍历。

总结归纳常见文字特性，后续补充。

css渐变提供了比较复杂多变的颜色背景，可以构造丰富的UI样式。

TS中的enum变量和普通object区别

鼠标事件和键盘事件在一些自定义组件时会得到使用，其实触发频率很高，但是往往被忽略。

Tree组件的数据处理往往需要使用递归，本文归纳一下常见的数据处理情景，持续更新；

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。

总结了useCallback、forwardRef中的deps，以及操作子组建时会遇到数据流不同步的问题。

文本展示类组件和图标按钮，提供了丰富的文案和样式体验。

查询条件多选时，条件为或的关系，那么最终条数为：条件1 * 条件2；如果一起查询时接口统一返回这些数据比较慢，可以尝试单条请求，再映射数据或者组装数据；

TypeScript 可以看成是 JavaScript 的超集（superset），即它继承了后者的全部语法，添加了一个独立的类型系统

继承是指将特性从父代传递给子代，以便新代码可以重用并基于现有代码的特性进行构建。JavaScript 使用对象实现继承。每个对象都有一条链接到另一个称作原型的对象的内部链。该原型对象有自己的原型，依此类推，直到原型是 null 的对象。

js环境中有很多工具函数，比如es6添加了很多新的属性和方法，这些方法也可以自定义实现，但是官方也提供出来了（这样可以形成规范和一致性），了解为什么要提供这些函数是有必要的。

Tree树形控件，多层次的结构列表。一般作为展示树形数据的控件，或者作为树形数据添加和修改的业务组件。

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，在许多项目中都有应用，但是往往平台搭建以后很少去修改配置，熟悉基础配置可以更快的修复配置问题。

布局组件涉及项目框架的搭建，往往被忽略和低关注，毕竟不是经常用到，但是在调整项目结构的时候往往又需要重新设计布局，所以有必要提前归纳分析；

Js内置了一些函数和变量，全局都可以获取使用

commitlint校验git提交信息。

大量结构化的数据需要展现；对数据进行排序、搜索、分页、自定义操作等复杂行为。

表单中input和select是使用频率最高的两个输入控件

正则表达式（Regular Expression）‌是一种强大的文本处理工具，用于匹配字符串中的字符组合模式。在JavaScript中，正则表达式是一个对象，可以用于文本搜索和文本替换等操作。例如，检查字符串是否包含某个特定单词、验证用户输入的电话号码或电子邮件地址是否符合特定格式，或者从字符串中提取特定部分的内容。

Hooks属于文件代码抽离，具有普通组件的运行环境，比一般函数更加灵活自定义 Hook 是一个函数，其名称以 use 开头，函数内部可以调用其他的 HookHooks文件不是组件，不能使用React.memo等组件相关Api。

Form是高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。

父子组件传值基本能占到60%以上，因为数据流向清楚，方便排查；context、redux虽然能方便使用，但是无法确定那个位置修改了页面数据，存在隐患；

文档对象模型（DOM）是一个网络文档的编程接口。它代表页面，以便程序可以改变文档的结构、风格和内容。DOM 将文档表示为节点和对象。clientHeight、offsetHeight、scrollHeight、scrollTop、offsetTop属性归纳。

Pomise, setTimerout相对比较容易，Pomise基于链式调用比较清晰，setTimerout作为宏任务在后期执行async\await出现各类返回值的情况下，情况比较复杂。

async function 声明创建一个绑定到给定名称的新异步函数。函数体内允许使用 await 关键字，这使得我们可以更简洁地编写基于 promise 的异步代码，并且避免了显式地配置 promise 链的需要。异步代码改造成同步执行，减少了代码嵌套。

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Echart图表常见属性。

直角坐标系 grid 中的 x 轴和y轴部分属性分析, axisLine\axisTick\axisLabel\splitLine\splitArea\axisPointer。

useState是一个内置的Hooks组件，State 变量 用于保存渲染间的数据，State setter 函数 更新变量并触发 React 再次渲染组件。