System ...

SLEET'S LOG

FILTER: CATEGORY

FE

Total Articles

FILTERED LOGS

#001

FE|2024年9月10日

TypeScript 的类型守卫

为了能跨函数上下文进行类型收集，可以通过 is 关键词显式向 TypeScript 提供类型信息

TypeScript

#002

FE|2024年8月27日

React 自动化测试

针对单测，JS 通常使用 Jest。此外，为了模拟 Dom 和事件，还需要 React Testing Library 进行辅助测试

React 测试 note

#003

FE|2024年8月23日

React 里 memo / useMemo / useCallback 的使用

为了子组件不必要的重复渲染，React 使用 memo / useMemo / useCallback 进行缓存处理。

React

#004

FE|2023年8月25日

JS 类型校验实践

最近写的一个项目对导出的 json 数据格式要求较为严格，因此在测试数据格式上花了很多时间。此处对前后使用过的数据类型校验工具进行记录。

TypeScript JavaScript midwayjs zod class-validator async-validator

#005

FE|2023年5月29日

grafana自定义panel插件开发（1）环境准备

由于 ospp 导师希望基于他的设计开发一版支持 g6 的 grafana panel，而官网文档只有英文版本，并且写得并不是很清晰，路上断断续续踩了很多坑，于是此处对 grafana 的自定义 panel 插件开发过程进行记录。

grafana

#006

FE|2023年3月31日

在next.js中使用localstorage的踩坑

预期想在next.js中根据登录情况选择性在header中显示头像或登录按钮，但是往往并不能在组件中获取localstorage的值。若尝试这么做，将会报错： nextjs ReferenceError: localStorage is not defined 会发生这个问题，是因为next.js默认使用ssr。程序运行在服务器端，自然不存在window对象为解决这一问题，我尝试使用如下...

next.js auth

#007

FE JavaScript函数式编程|2023年3月7日

范畴论启发下的函数设计模式（1）

从编码的角度看，范畴论在 JS 中的应用，本质上还是为了解决函数组合的问题。

note JavaScript

#008

FE JavaScript函数式编程|2022年12月31日

JS函数式编程的理解（2）

接上篇 JS 函数式编程的理解（1）

JavaScript note

#009

FE|2022年12月31日

如何通过 React 钩子取代容器组件

容器组件是提供、创建和持有数据并服务于子组件的组件，其唯一的工作是处理数据，而将展示 UI 的工作交给展示组件。而处理数据的工作的逻辑不止能直接写在容器组件中，其实也可以被封装成一个 hooks，再被容器组件调用，从而使这部分逻辑抽离、语义化并易于维护。

React

#010

FE JavaScript函数式编程|2022年12月30日

JS函数式编程的理解（1）

函数式编程是一种编程范式。相对命令式编程的过程思维，函数式编程更侧重于结果思维。对于每个函数调用，不必关注内部的执行细节，而只需要关注函数的输入与输出。

JavaScript note

#011

FE|2022年11月26日

react-router(v6) + react-transition-group 实现路由切换动效

其实早在五月的时候就研究过这个，网上基本上是 router-v5 版本的 demo，而 v6 版本废弃了不少 v5 版本的 api，其中就包括 demo 里用到的。当时想模仿 demo 进行实现，可惜实现的效果并不尽人意，只做到了路由进入的动效。如果加上路由退出的效果，会出现闪烁的现象。然而由于忙着准备期末，就没有再深入。今天来完善一下之前的探究。

React react-router-dom react-transition-group CSS

#012

FE|2022年11月14日