Dontla的博客

【代码】React Tailwind CSS div布局demo。

在 React 开发中，组件渲染性能是一个永恒的话题。当组件包含复杂计算、依赖重的派生数据，或在高频渲染场景中运行时，就会带来性能下降。这时，React 提供的useMemo就能发挥重要作用——用于缓存计算结果，避免不必要的重复运算，从而提升应用性能。useMemo是 React 提供的重要性能优化工具，适用于缓存昂贵计算或保持引用稳定。在 Next.js App Router 中，它和普通的 React 组件用法完全一致，但要注意不要滥用。在真实项目中，合理应用useMemo。

Zustand 是由 React Spring 团队开发的一个极简状态管理库。🌿 小巧（gzip 后只有 1KB 左右）⚡ 没有样板代码（不像 Redux 那样啰嗦）🧩 支持 hooks 风格🔄 支持中间件（如persistdevtools💪 支持 TypeScript 开箱即用“Zustand = 极简的 Redux + React Hooks 的优雅”这是对象字面量，不是 JSONincreasedecreasereset是对象的方法（函数属性）set。

Zustand 默认导出的是一个单例 hook（当你在模块顶层create()时），在浏览器端这通常是期望的（SPA 中的单一全局状态）。如果在服务器端把这个单例 store当成全局共享使用，会导致多个请求/用户之间共享同一个内存实例，从而出现状态串流（请求 A 的修改导致请求 B 可见）。Next.js 的app路由没有；在app路由里我们常用 Server Components 来构建服务端逻辑并把初始 state 通过 props 传给客户端组件，这要求我们。

阶段发生位置作用是否可交互服务端预渲染（SSR）服务器生成静态 HTML❌ 否客户端水合（Hydration）浏览器绑定事件 & 状态✅ 是✅ 客户端组件的渲染函数（render）确实在 SSR 和 Hydration 阶段各运行一次，但只有客户端那次会执行副作用和事件绑定。

添加任务切换完成状态批量选择/取消选择删除选中任务清除已完成的选中任务数据持久化（localStorage）Zustand：轻量级状态管理，API 简单持久化：使用persist中间件自动保存到 localStorage不可变更新：使用set函数式更新，保持状态不可变TypeScript：类型安全，提供良好的开发体验函数式编程：使用mapfilter等函数式方法处理数组Zustand 的基本用法状态持久化TypeScript 类型定义。

正如知识库[1]所述：Zustand的"核心理念是’最小化’，意味着你可以只为应用中需要的部分状态创建store，而不是强迫使用全局状态，进而提高了应用的性能和可维护性"。Zustand的魔力在于它让你"忘记状态管理的存在，专注于构建功能本身"，这正是它被众多开发者称为"轻量级状态管理的革命"的原因。5，还可以用extern在函数外对全局变量声明，使全局变量的作用域从声明处到文件的结束。4，当全局变量与局部变量重名的时候，起作用的是局部变量，全局变量被屏蔽掉。Zustand不是C++全局变量，而是。

让代码更简洁、可维护，避免不必要的数据传递。总之，状态管理不是为了"增加复杂度"，而是为了在应用规模扩大时，保持代码的清晰度和可维护性。

React 的Context提供了一种方式，让我们可以在组件树中共享数据，而不需要通过 props 层层传递。提供数据（Provider）消费数据（Consumer）功能用法说明创建 Context定义共享数据容器提供数据包裹需要访问数据的组件树消费数据在任意子组件中读取数据封装自定义 Hook提升可读性和复用性useContext是 React Hooks 体系中最简洁、却极其实用的一个 Hook。它让我们能在函数组件中优雅地共享全局状态，减少 props 层层传递的痛苦。💡。

概念含义举例props组件外部传入的数据children组件标签内的内容<Card>这里是 children</Card>用途让组件更灵活地包裹内容Layout、Provider、Modal、Card、Button 等类型通常是可以是任意可渲染内容取值在函数参数里直接解构。

用法场景示例含义类继承子类继承父类接口继承接口扩展泛型约束限制泛型类型结构条件类型X : Y类型逻辑判断分发行为...联合类型分支推断extends看似简单，却几乎贯穿了 TypeScript 类型系统的各个角落。它既能用于面向对象的继承，也能支撑类型编程的逻辑判断。理解它的不同语义，是迈向高级 TypeScript 编程的必经之路。

方法是否阻塞可读性推荐程度setTimeout否一般⭐⭐Promise +await否高⭐⭐⭐⭐whilebusy loop是差❌ 禁止使用JavaScript 虽然没有原生的sleep()函数，但通过异步机制，我们依然可以实现优雅、非阻塞的“睡眠”。记住一句话：JS 的 sleep，不是“让线程睡觉”，而是“让任务等待”。

在现代 Web 开发中，异步数据加载是几乎每个应用都会遇到的问题。我们常常需要等待网络请求完成、组件懒加载结束，或者资源准备好之后再渲染 UI。虽然简单，但当异步逻辑复杂时，代码会变得难以维护。为了解决这一问题，React 团队引入了 Suspense—— 一种用声明式方式处理异步渲染的机制。let result;})});return {read() {},// 若数据未就绪，将触发 Suspense fallbackreturn (

简而言之：这是 SSR 阶段的请求失败导致的可恢复错误。要么保证请求成功，要么把请求挪到客户端副作用里，或用正规服务端数据获取并处理错误。注意：如果把请求挪到客户端副作用里，suspence可能就没用了。

懒加载（Lazy Loading），又称延迟加载，是一种性能优化策略。“按需加载”—— 只在用户真正需要时，才去加载对应的资源。在 React 中，懒加载通常指按需加载组件。比如首页用户暂时看不到的管理后台组件，我们就没必要在首屏就加载进来，而是当用户进入后台页面时再加载。实际开发中我们通常会使用一个优雅的加载动画，而不是简单的文本。特性说明概念按需加载组件，减少首屏体积核心 API<Suspense>典型场景路由懒加载、大组件延迟加载优点加快首屏加载速度，提升用户体验注意。

在使用这就是 React.FC（或的用法。那么，React.FC到底是什么？它的优缺点有哪些？在现代 React 项目中，我们是否还应该使用它？本文将带你全面了解。React.FC是 React 官方为函数式组件（Functional Component）提供的泛型类型定义。propTypes?: string;可以看到，React.FC其实是一个函数类型，接受泛型参数P（组件 props 的类型），并返回一个 React 元素。这使得组件在书写时具备类型安全和自动补全的优势。

它定义了用户与系统交互的路径；决定了工程的模块划分与加载方式；甚至影响 SEO、性能与权限体系。理解其原理、遵守设计规则，就能让你的 React 应用具备更强的扩展性与一致性。如果说组件是前端的“细胞”，那么路由就是“神经系统”。掌握它，我们才能构建真正灵活、可进化的前端应用。前端路由的本质，不是路径的跳转，而是状态的映射。掌控路由，你就掌控了应用的灵魂。

良好的 SPA 路由设计是“信息架构 + 工程实践”的结合。以 React 为例，围绕 URL 语义、嵌套路由、代码分割与鉴权构建清晰的路由树，可以在保证用户体验的同时显著提升项目的可维护性与演进空间。需要 SEO/首屏性能时，再升级到 SSR/SSG 架构（如 Next.js），延续相同的路由与信息架构思想即可。

在网页中，视口（Viewport）可以理解为浏览器可视区域的窗口。用户在屏幕上能看到的页面内容范围，就是当前的视口。视口 ≠ 页面宽度视口 = 当前设备浏览器窗口中实际可见的区域网页的内容可以比视口大，也可以小。超出视口的部分，用户可以通过滚动查看。类型说明获取方式页面布局宽度用户当前可见区域理想设备宽度想要移动端网页正常显示，必须理解视口，并正确设置。

通过这个简单的示例，我们使用Tailwind CSS实现了仿ChatGPT的聊天界面。Tailwind CSS的实用类使我们能够快速构建响应式UI，而Zustand则提供了简洁的状态管理。使用Tailwind的实用类快速构建UI通过Zustand管理应用状态使用假接口模拟后端交互确保界面在不同设备上的响应式体验这个项目是学习Tailwind CSS和现代前端开发模式的绝佳起点。随着你对Tailwind的熟悉，可以尝试添加更多功能，如消息表情、图片上传等。

【代码】Tailwind CSS Next.js实战（官方）Tailwind Demo、Tailwind教程。

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default在网页开发的早期，HTML 主要用于描述页面的结构，但并没有很强的语义。例如，开发者经常使用 和 来包裹各种内容，用 class 名区分不同的模块。这样虽然能实现页面布局，但对于搜索引擎、读屏软件或后期维护者来说，页面结构往往不够清晰。HTML5 的出现，改变了这一切。它引入了一系列 语义化标签（Semantic Tags），让网页的结构更自然、语义更明确，既利于 SEO，

函数执行时对外部世界的影响首次渲染后：没有清理函数触发依赖项变化时：先调用上一次 effect 返回的清理函数，然后再执行当前 effect组件卸载时：调用最后一次 effect 的清理函数useEffect是处理副作用的 Hook，它让我们把副作用逻辑与渲染逻辑隔离开来。清理函数在 effect 卸载或依赖变化时负责资源释放，是防止内存泄漏与状态异常的重要保障。依赖数组用于精确定义 effect 何时执行，要包含 effect 内部所用到的所有外部变量。

👉是一个在线 REST API 服务，提供一系列模拟数据接口前端开发阶段的接口调试；HTTP 请求库（如 Axios、Fetch）的测试；后端框架或工具的 API 调用演示；教学与 Demo 示例。它的数据内容不会变化，也不会真的存入数据库，因此可以无限次请求，完全免费、无需注册。优点说明🚀 免费且无需注册打开即用🧩 RESTful 风格与真实项目一致🔁 稳定可靠数据结构固定💡 支持 CRUD方便联调测试。

在自定义 Hook 中使用}, [url]);这里若不加fetchData每次都会变，useEffect就会无限执行。在这个代码中，fetchData 会因为 url 变化而变化。useCallback 的依赖项是 [url]，所以当 url 发生变化时，fetchData 函数会重新创建useEffect 的依赖项是 [fetchData]，所以当 fetchData 变化时，useEffect 会重新执行。

React.memo是一个高阶组件（Higher Order Component，HOC），用于缓存函数组件的渲染结果，从而避免不必要的重新渲染。简单来说：如果一个组件在相同的 props 下渲染结果是一样的，那么 React.memo 会让这个组件“记住”上一次的渲染结果，直接复用，而不重新执行渲染逻辑。React.memo允许你传入一个自定义比较函数，用来自定义 props 的比较逻辑。return (<>console.log("按钮点击，新的计数：", count + 1);

V0 的出现并不意味着前端开发的终结，而是开发方式的转变。它让前端工程师从重复劳动中解放出来，把更多精力放在架构、性能和用户体验上。正如过去 Webpack、Next.js、Tailwind 改变了前端工作流，V0 正在让“AI 生成式开发”成为下一个里程碑。V0 不是要取代开发者，而是要让开发者更快、更聪明、更具创造力。

any(null);booleandata：保存从服务器获取的用户数据。loading：控制是否要发起或取消请求。：用来跳过组件初次渲染时useEffect的执行（防止自动请求）。：追踪是否正在请求中，用于安全地取消请求。步骤操作状态变化说明1页面初次加载不请求数据2用户点击按钮useEffect触发，执行3请求进行中可再次点击取消4用户再次点击cleanup 中触发，取消请求5请求完成更新。

在 React 的世界里，Hooks是一个革命性的概念。它让函数组件拥有了“状态”和“生命周期”的能力，也让代码逻辑的复用变得更加自然与简洁。除了 React 自带的 Hooks（如useStateuseEffectuseContext等），我们还能自定义 Hook（Custom Hook），以实现更强大、更灵活的功能复用。本文将带你全面了解自定义 Hook 的概念、使用场景以及最佳实践。自定义 Hook多个组件都有相同的副作用逻辑（例如：监听滚动、窗口尺寸变化、数据请求等）；

简单来说，解构赋值就是按照一定的模式，从数组或对象中提取值，然后将它们赋值给变量。// 数组解构// 10// 20// 对象解构// Alice// 25解构赋值更加简洁明了。特性数组解构对象解构匹配依据位置顺序属性名支持默认值✅✅支持嵌套✅✅支持重命名❌✅解构赋值不仅让代码更简洁，还能大大提升可读性与可维护性。无论在日常开发还是函数设计中，灵活使用解构语法都能让你的 JavaScript 代码更加优雅！✍️结语。

问题解决方案调试器跳进 React / Next.js 内部代码使用每次都要手动标黑盒太麻烦在 DevTools 的全局配置调试时映射不到原始文件启用Source Map想更舒适地调试使用VS Code 调试器或只用F10Chrome 调试器功能非常强大，但默认设置对现代框架来说太“热心”了。通过你可以让调试器只关注你写的代码，不再迷失在react-dom或next/dist的深处。从此以后，调试不再是噩梦，而是一种享受。

快捷键功能F8继续执行脚本F9单步调试F10跳过函数调用F11进入函数调用跳出当前函数Ctrl + F8停用断点掌握这些调试按钮，就能在前端开发中快速定位问题、分析调用栈、优化逻辑。Chrome DevTools 是前端工程师的“放大镜”和“显微镜”——用得越熟，开发效率就越高！📘延伸阅读Chrome DevTools 官方文档（英文）前端调试技巧大全：从断点到性能分析。

不以use开头好像也可以”，这其实是一个很常见的误解。

在前端开发中，定时器（Timer）是非常常用的功能之一。无论是轮询接口、执行动画、还是延迟某个动作的触发，都离不开它。：延迟执行一次。：按固定间隔重复执行。TypeScript 也支持它们，只不过在类型定义上稍有区别。}, 1000);方法作用清理方式注意事项延迟执行一次清除后变量不会自动变null固定间隔重复执行同上useEffect启动/清理定时器返回清理函数组件卸载时清理Hook封装可复用逻辑自动清理代码更简洁。

useRef创建一个在组件生命周期中保持不变的引用对象安全地引用 DOM 元素，用于操作（如聚焦、滚动等）不会触发组件重新渲染，适合不需要渲染的场景在这个例子中，useRef用于实现页面加载时自动聚焦输入框的功能，是useRef的典型应用场景。useRef✅ 获取 DOM 节点引用✅ 保存跨渲染的值✅ 缓存定时器 / 外部资源✅ 避免闭包陷阱（如函数组件内引用旧状态）掌握useRef能让你更优雅地管理组件的非可视状态，写出更稳定、性能更好的 React 代码。

用户操作或数据变化↓│ 挂载（Mount） │ ← 第一次显示（点击打开、切换路由等）↓│ 更新（Update） │ ← 用户输入、点击、接口返回数据等↓│ 卸载（Unmount）│ ← 页面切换、隐藏组件、销毁实例等阶段类组件方法函数组件写法常见用途常见触发操作挂载初始化、数据请求页面加载、点击显示、条件渲染变为 true更新响应数据变化用户输入、点击按钮、父组件更新卸载清理副作用路由切换、隐藏组件、条件渲染变为 false理解 React 的三个阶段只是第一步，

在 React 中，生命周期函数（Lifecycle Methods）是指组件在创建、更新和销毁过程中自动调用的特定函数。这些函数让开发者能够在组件的不同阶段执行特定逻辑，例如：发起网络请求、操作 DOM、设置订阅或清理资源等。在 React 发展历程中，生命周期经历了从Class 组件到Function 组件 + Hooks的重大演变。早期我们使用类组件及其生命周期方法来管理状态与副作用，而在 React 16.8 引入Hooks后，这些生命周期逻辑被更简洁、更灵活的函数式写法所取代。

特性惰性初始化函数写法执行时机仅在首次渲染时执行适用场景初始化逻辑复杂或性能开销大的场景好处避免重复计算、提升性能常见错误误用导致重复执行。

IIFE是的缩写，意思是“立即执行的函数表达式顾名思义，它定义完就立刻执行，不需要再单独调用。");})();这段代码定义了一个匿名函数，然后立刻执行它。在函数外层加上一对小括号()，告诉 JavaScript 引擎：“这是一个表达式，不是普通函数声明。");}();就会报错，因为单独的function开头在语法上是函数声明，声明不能直接调用。加上括号，就变成了表达式形式，可以立即执行。IIFE 是一种定义并立即执行的函数表达式。

本文详细介绍了React中的useState钩子，用于在函数组件中管理状态。主要内容包括： 基本概念：解释useState的作用，对比类组件的state写法 基本语法：const [state, setState] = useState(initialValue) TypeScript泛型写法：如何为状态变量指定类型 计数器示例：展示基本用法 函数式更新：避免闭包陷阱的推荐写法 初始值为函数：优化性能的高级用法 特性总结：包括状态独立性、异步更新等 常见错误：直接修改状态等常见问题 与useReducer对