Dontla的博客

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

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

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

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

在现代 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），延续相同的路由与信息架构思想即可。

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

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

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

在自定义 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);

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

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

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

不以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对

环境StrictMode 状态渲染次数说明开发模式 (✅ 开启（默认）2 次检测副作用的机制生产模式 (❌ 自动关闭1 次不会重复渲染手动关闭 Strict Mode1 次开发时禁用检测（不推荐长期关闭）在 Next.js 开发模式下看到「组件渲染两次」是 React 18 严格模式的正常行为。它不是 bug，而是 React 在帮你提前发现潜在问题。生产环境下不会出现双渲染。

在 JavaScript 里，当一个函数引用了外部变量，就形成了“闭包”。count++;fn();// 1fn();// 2inner()能访问outer()里的变量count，这就是闭包。写法是否安全是否会被闭包陷阱坑到用途❌ 不安全✅ 有风险简单同步场景✅ 安全❌ 不会推荐通用写法💬闭包陷阱就是函数“记住了旧的 state”，导致状态更新丢失或错误。

在 React 中，“水合”（Hydration）是一个术语，指的是：React 在客户端接管（hydrate）由服务器端渲染（SSR）生成的静态 HTML，使其变为可交互的 React 应用。

方案优点缺点本地托管字体（推荐）稳定、可离线、性能好需手动下载字体使用镜像源（临时）快速修复访问问题镜像不一定长期可用移除字体导入简单样式会变丑。

问题原因为什么要手动加？因为 Next.js 默认是 Server Component，为了显式区分哪些组件要在浏览器执行。Next.js 能不能自动判断？理论上能，但会导致性能差、构建不确定、边界模糊。这样设计的好处？控制更明确、包体更小、服务端渲染性能更高。

规则）是多余的，因为Google Fonts的URL已经包含了所有字形变体（包括cyrillic/greek等），不需要手动添加。请删除该部分（如果它存在于您的。该错误是由于在CSS文件中错误地放置了。），但您将其放在了规则中间。放在文件最顶部（除了。

执行完（Tailwind的配置文件）（PostCSS的配置文件，由-p选项生成）

命令是Next.js开发的起点，理解其参数功能能帮助我们快速搭建符合需求的项目。根据项目规模和团队偏好，选择合适的参数组合，可以大大提高开发效率。随着Next.js的不断发展，这些参数也在不断更新，建议定期查看Next.js官方文档，了解最新功能。

随着Next.js 13的发布，React生态迎来了革命性的变化——服务端组件（Server Components）和客户端组件（Client Components）的引入，彻底改变了我们构建应用的方式。路由，本质上是拥抱了服务端组件这一新范式。服务端组件提供了更好的性能、更安全的数据处理方式，而客户端组件则保留了必要的交互能力。随着服务端组件的引入，Next.js重新强调了服务端渲染的优势，这促使了。服务端组件是Next.js 13+的默认组件类型，它们在服务器上渲染并生成HTML，直接发送到客户端。

在Next.js的演进过程中，路由系统经历了重要变革。随着Next.js 13的发布，App Router作为新一代路由系统正式登场，与传统的Pages Router形成对比。本文将深入探讨两者的核心区别，帮助你根据项目需求做出明智选择。

Turbopack是由Vercel开发的基于Rust的高性能前端构建工具，专为开发环境优化。它被设计为Webpack的继任者，旨在解决传统构建工具在大型项目中速度缓慢的问题。Turbopack的核心理念是"速度优先"，通过创新的架构设计和Rust语言的高性能特性，实现了惊人的构建速度。

app以下是 Next.js (App Router, v13+) （）的典型路由结构实现，与 React Router v6（） 的配置式路由不同，Next.js 采用。

在 React 中，你的组件文件大多数使用 .js 作为扩展名。在 TypeScript 中，提供两种文件扩展名：.ts 是默认的文件扩展名，而 .tsx 是一个用于包含 JSX 代码的特殊扩展名。

提示：