zed.ink在线
一个不为人知的个人学习小站
自定义业务 Hook:从零解剖一个 React + TypeScript Todo 应用:用金字塔思维看透前端架构
源码在这里 一、山顶:一句话说清楚这个项目在做什么 这个项目用"类型定义 → 状态逻辑 → UI组件"三层分离的方式,构建一个待办事项应用。核心创新点在于:把所有业务逻辑抽进一个自定义 Hook(us
前端路由(三):鉴权、拦截与重定向
本文讲解 React‑Router 路由鉴权,封装路由守卫拦截受限页面,借助 state 传来源地址、replace 控制历史记录,实现未登录跳转、登录回跳,适用于各类权限校验场景。
React 受控组件与非受控组件:从一个输入框讲清表单数据流
输入框能正常提交,并不代表表单的数据流已经清楚。本文从两个可运行示例出发,对比 React 受控与非受控组件,并继续拆解多字段更新、实时校验、默认值、文件输入和常见模式切换问题。
从一个颜色选择器说起:我终于整明白了 React+TS 里的 model 与 api 分层
先从那个堆出来的颜色选择器说起 最开始想法很简单:三个滑动条,分别控制红、绿、蓝三个通道,取值 0 到 255,左边放个方块实时显示颜色。这不就是最基础的受控组件嘛,我闭着眼都能写。 第一版:所有东西
React useRef、useEffect、useState 与 Web Worker 多线程实践
问题背景 JavaScript 在浏览器中是单线程的。如果有一段耗时 5 秒的 for 循环,页面就会冻结 5 秒——按钮点不动,滚动也卡死。 浏览器提供了 Web Worker API,可以在后台线
别再瞎写 React Router!7 个高频踩坑点一次性讲透
这篇文章就当是我的学习笔记,想到哪写到哪,你要是也在学路由,说不定能少走点弯路。 先搞懂:前端路由到底在干嘛 说实话,我之前用路由都是直接抄配置,Route 写上去能跑就行。至于它底层怎么实现的,为什
listToTree 速通:一维数组怎么变出多级菜单?Map 和 reduce 两种全解
写在前面 写过管理后台的兄弟应该都遇到过这种活: 地址三连弹、组织架构图、商品分类树…… 凡是带"层级"的功能,背后几乎都是同一个套路:listToTree。 这篇文章把两种主流写法掰开揉碎讲一遍,顺
React 受控/非受控组件与 React.memo 性能优化——从本质到实战
React 受控/非受控组件与 React.memo 性能优化——从本质到实战 开篇:两条知识线,一个共同问题 最近系统性地梳理了 React 表单和性能优化的基础,产出了两组 Demo: contr
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析
React Context 与自定义 Hook 从底层到实践:「跨层级通信 + 副作用封装」全解析 前言 在 React 开发中,有两个痛点几乎所有开发者都会遇到: 组件层级太深,props 一层层传
组件拆了,逻辑没拆——自定义 Hook 才是 React 业务逻辑的正当归属
组件拆了,App.tsx 还是 300 行?把业务逻辑装进自定义 Hook 开篇:你把组件拆了,然后呢? 看看这个 React 项目的目录结构,非常标准: 类型、Hook、组件,三层分离——看起来很干