@PHARAOH-CSDN博客

原创 HOW - CSS 定义颜色值

使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */

2024-07-22 11:03:23 741

原创 WHAT - CSS :root 变量定义和使用（var）

CSS变量可以在CSS文件中定义，并且通常会在:root 选择器中定义，以便在整个应用程序中全局使用。:root {在这个例子中，等变量被定义在:root选择器中，使得它们在整个CSS文件中都可以被引用和使用。等CSS变量通过全局CSS定义和管理，提供了一种灵活和可维护的方式来管理应用程序中的颜色和样式。这些变量可以在CSS文件或CSS-in-JS库中定义，并在整个应用程序中引用和使用。

2024-07-22 10:56:11 205

原创 WHAT - 通过 shadcn 组件源码学习 React

variant: {},size: {},},},},: 使用cva函数定义了按钮的样式变体。这个对象包含了两个主要部分：variants: 定义了不同的变体选项，如variant和size，每个选项又包含不同的具体样式。: 定义了默认的变体值。当然，让我们逐一解释variants对象中的每个属性及其对应的CSS属性值。这些variants属性提供了丰富的样式变体，使得按钮组件可以根据不同的需求应用不同的外观和尺寸，通过简单的属性传递实现了多样化的视觉效果。asChild?

2024-07-22 10:47:05 520

原创 WHAT - 贪心场景和算法实现

贪心算法（Greedy Algorithm）是一种解决优化问题的简单且直观的算法策略。它在每个决策步骤中选择当前最佳选项，希望这样的局部最优选择能够导致全局最优解。贪心算法的特征和应用场景如下：局部最优选择：在每个决策阶段，贪心算法都会做出当前看起来最优的选择，而不考虑前后步骤的影响。简单直观：贪心算法通常易于理解和实现。相对于其他复杂的算法策略，贪心算法的思路更加直接。无回溯：贪心算法在每个决策阶段都会做出不可逆的选择，不会回溯以寻找其他可能的解决方案。

2024-07-21 15:55:01 787

原创 HOW - React 处理不紧急的更新和渲染

在 React 中，有一些钩子函数可以帮助你处理不紧急的更新或渲染，从而优化性能和用户体验。

2024-07-21 14:56:11 438

原创 WHAT - React Context 两层组件的优化机制

为了避免这种情况，可以将组件分为两个部分：一个外层组件从 Context 中读取所需的内容，并将这些内容作为 props 传递给使用。通过这种方式，Provider 组件管理状态逻辑，Consumer 组件专注于渲染逻辑，从而实现了状态逻辑和视图逻辑的分离。具体来说，当 Context 的值发生变化时，所有使用。这样，通过将组件分为两个部分，确保只有与子组件相关的 Context 值变化时才会触发子组件的重新渲染，从而优化性能。这样，只有当与子组件相关的 Context 值发生变化时，子组件才会重新渲染。

2024-07-21 14:48:43 586

原创 HOW - 保证 WebSocket 持续正常连接

保证 WebSocket 持续正常连接。

2024-07-19 16:55:08 882

原创 WHAT - cmdk

（command palette，命令面板）通常用于创建命令面板组件。这种组件允许用户通过一个基于搜索的界面快速访问命令或导航应用程序。这种概念受到了 Visual Studio Code、Slack 等工具中的命令面板的启发，提供了一种快速与各种功能交互的方式。通过这种方式，开发者可以在 React 项目中创建一个高效、用户友好的命令面板，提升用户的操作体验。有关详细实现和更多高级用法，可以参考。在 React 中，

2024-07-18 15:39:33 1044

原创 HOW - SVG 图标组件封装（Lucide React）

在中我们介绍过 “动态 Fetch CDN SVG 图标”，这种在开发者将需要用到图标依次上传到 CDN 再在项目通过请求引入使用的场景。但其实，更常见的做法还是统一维护一组 SVG 图标，然后将其封装成组件，直接在项目中通过 Import 的形式使用。

2024-07-18 11:48:33 1200

原创 WHAT - Tailwind CSS 的灵活布局（Flex & Grid）

- 子元素 --> </ div >-- 子元素 --> </ div >-- 子元素 --> </ div ></-- 子元素 --> </ div >：定义列数，例如。：定义行数。属性FlexGrid启用布局flexgrid方向flex-rowflex-col对齐justify-*items-*justify-*items-*间隔gap-*包裹flex-wrap这两种布局各有优缺点，选择合适的布局方式可以帮助你更好地实现设计需求。

2024-07-17 15:20:08 970

原创 WHAT - Tailwind CSS 的数值机制

等类名后面跟的数值是基于 Tailwind CSS 的默认间距比例系统。默认情况下，这些数值是从。如果需要更精确的控制，可以自定义 Tailwind CSS 配置文件 () 中的 spacing 选项。在使用 Tailwind CSS 时，你可以使用这些数值来控制元素的内边距（（即基于根元素字体大小的相对单位）。

2024-07-17 11:25:45 384

原创 WHAT - 介绍一个不太一样的 UI 组件库 shadcn/ui

ShadCN (ShadCN/UI) 是一个现代的 React 组件库，旨在提供简洁、高效且美观的用户界面组件。它在设计和功能上类似于其他流行的 UI 组件库，如 Ant Design、Material-UI 等，但它有一些独特的特点和设计理念。ShadCN 是一个现代、高效的 React 组件库，提供了丰富的 UI 组件和高度的可定制性，适合各种类型的前端项目。通过简洁直观的接口和响应式设计，它能够帮助开发者快速构建美观、实用的用户界面。

2024-07-17 11:08:24 606

原创 HOW - React Suspense 优化懒加载和异步数据加载

, [url]);// 暂停渲染return (React Suspense 提供了一种简单、优雅的方式来管理异步操作和懒加载的组件，改善了组件加载和数据获取的用户体验。随着 React 的发展，Suspense 的功能和用法也在不断扩展。

2024-07-15 15:51:13 408

原创 WHAT - 分页中基于索引和基于游标

在加载列表数据时，分页（pagination）是为了避免一次性加载大量数据，导致性能问题或用户体验不佳。分页主要有两种方式：基于索引的分页和基于游标的分页。让我们详细了解这两种分页方式及其应用场景。

2024-07-15 15:34:21 1076

原创 WHAT - 最原始的表单验证机制 form validation

组件库中经常用到form表单，其中表单验证是很重要的一个环节。那最原始的html表单验证机制是怎么样的？以及我们可以利用哪些特性来实现自定义表单验证？

2024-07-14 14:33:00 787

原创 HOW - 结合 Form 和 Schema 的数据验证方案（Shema Validation）

在 React 应用中，使用表单和 Schema Validation 可以有效地管理表单状态和验证输入数据。

2024-07-12 11:46:49 760

原创 HOW - 黑暗模式 Dark Mode

要为一个旧的前端项目引入黑暗模式，可以按照以下步骤进行：分析项目结构和样式：引入新的样式文件：定义黑暗模式的样式：选择激活黑暗模式的方式：实现切换逻辑：测试和调试：优化和部署：持续改进：通过以上步骤，你可以有效地为旧的前端项目引入黑暗模式，提升用户体验并跟上现代设计趋势。在引入黑暗模式时，你可以通过几种方法来与已有的样式文件进行区分：新建专用的黑暗模式样式文件：使用CSS变量或预处理器：添加特定的类名或属性：使用伪类和选择器：条件性加载：无论采用哪种方法，确保黑暗模式的样式定义清晰明了，并且能够方便地与已有

2024-07-10 16:57:20 1104

原创 WHAT - Tailwind 样式方案（不写任何自定义样式）

因此，虽然 Tailwind 可以在很多情况下取代传统的自定义 CSS 样式，但是否可以完全替代取决于项目的具体需求和团队的偏好。但是对于大型、复杂的项目，可能需要更多的自定义样式或组件化的方法，这时可能还需要传统的自定义 CSS。Tailwind CSS 是一个 utility-first 的 CSS 框架，它通过提供大量的 utility 类来帮助快速构建界面，从而减少了传统 CSS 中需要编写和维护的自定义样式的数量。：如果需要非常具体和个性化的样式，可能需要额外的自定义 CSS。

2024-07-10 16:16:29 861

原创 WHAT - React 请求方案之 SWR（stale-while-revalidate）

SWR 是一个用于数据请求的 React Hooks 库，它的名字来源于 stale-while-revalidate，即利用缓存来提供即时响应并在后台更新数据的策略。

2024-07-05 16:30:27 1076

原创 WHAT - a 标签跳转的 rel=“noopener noreferrer“

是一种安全性和性能优化的设置，通常用于在<a>标签中打开新窗口或者标签页时使用。

2024-07-05 14:18:38 177

原创 WHAT - React useEffect 依赖的 Object.is

Object.is是 JavaScript 中用于比较两个值是否严格相等的方法，它在处理特殊值（如NaN和-0）时与===运算符有所不同。在 React 中，React Hooks 如useEffect和useMemo使用Object.is来确定依赖项是否发生变化，从而决定是否重新执行相关的效果或计算。

2024-07-05 11:36:44 1031

原创 HOW - React Router v6.x Feature 实践（react-router-dom）

理解 React Router 中和组件相对路径的行为，特别是在嵌套路由情况下的增强行为，有助于开发者更有效地管理和导航应用程序中的链接。相对路径的使用使得在不同层级和场景下的导航操作更加灵活和便捷，但需要注意理解和控制路径的解析和构建规则。

2024-07-04 20:33:38 1104

原创 WHAT - URL segments

【代码】WHAT - URL segments。

2024-07-04 17:13:12 631

原创 WHAT - NextJS 的路由系统和 react-router-dom

不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。

2024-07-04 16:37:43 983

原创 WHAT - React & Immer

官方文档：https://immerjs.github.io/immer/example-setstateReact 和 Immer 是两个不同的工具，它们在处理状态管理和状态更新时可以很好地结合使用。

2024-07-04 13:40:10 615

原创 WHAT - React useReducer vs Redux

React 内置 vs 单独库useReducer是 React 的一部分，专注于组件内部的状态管理；Redux 则是独立的状态管理库，适用于全局状态管理。适用范围useReducer适合于简单到中等规模的局部状态管理；Redux 适合于复杂的全局状态管理需求，尤其是需要处理异步操作和多个组件共享状态的场景。生态和工具支持：Redux 提供了更丰富的生态和工具支持，如 Redux DevTools、各种中间件、插件等，使得开发、调试和维护大型应用更加便捷。

2024-07-04 10:44:31 573