React - 随笔分类 - guangzan

在 React 中重拾原生 HTML 属性

摘要：在现代 React 组件开发中，优先想到 useState、useEffect、context、props drilling 这样的框架能力，而容易忽略：浏览器原生 HTML 属性本身，就是一个强大而成熟的状态表达载体。比如 data-* 为代表的自定义属性，在近几年被越来越多的专业组件库采用，阅读全文

posted @ 2025-11-19 17:46 guangzan 阅读(512) 评论(3) 推荐(4)

React Server Components 入门

摘要：大家好！最近在个人项目里用上了 React Server Components (RSC)，觉得这东西有点意思，能让应用更快、更轻。以前 React 组件全在浏览器跑，现在部分移到服务器。今天我就来聊聊 RSC，从基础说起，帮你快速上手。什么是 React Server Components？简阅读全文

posted @ 2025-11-06 09:18 guangzan 阅读(339) 评论(2) 推荐(1)

React 状态管理的“碎片化”

摘要：前言三年前，我们还在 Reddit 上吵得不可开交： “Redux 太啰嗦！” “Zustand 太黑盒！” “Jotai 会内存泄漏！” 今天，React 19 直接把“外挂仓库”拆成了无数颗微状态胶囊（Micro-State Capsules）——随用随取，随丢随灭。状态不再集中，而是散落在阅读全文

posted @ 2025-11-03 17:33 guangzan 阅读(187) 评论(0) 推荐(4)

解决 Semi Design Upload 组件实现自定义压缩，上传文件后无法触发 onChange

摘要：背景我们团队主要在做 C 端产品，对于 C 端应用，图片资源使用 CDN 十分重要，因此我们曾建立了一个文件上传平台：上传文件后，可以复制图片的 CDN URL 在前端项目中使用。目前服务端不会对图片做压缩，使用前得先借助其他工具手动压缩再上传，体验很差。调研后发现，纯前端就能完成压缩且完全满足阅读全文

posted @ 2025-10-22 18:10 guangzan 阅读(165) 评论(0) 推荐(3)

在 Zustand 中创建通用 Action

摘要：为何需要通用 Action？在 Zustand 状态管理库中，开发者常常需要为状态对象的每个字段单独编写更新函数。然而，随着状态结构的复杂化，这种方式会导致代码冗余，维护成本增加。例如： updateName: (name) => set(() => ({ name })), updateAge: 阅读全文

posted @ 2025-09-12 18:54 guangzan 阅读(71) 评论(0) 推荐(2)

在 Zustand 中实现 computed 的方式

摘要：引言在状态管理领域，计算属性（computed properties）是一个极其重要的概念。MobX 和 Pinia 等库都内置了计算属性功能，允许开发者声明式地定义派生状态。虽然 Zustand 本身没有直接提供 computed API，但这并不意味着我们无法实现类似的功能。本文将介绍三种在阅读全文

posted @ 2025-08-06 14:03 guangzan 阅读(424) 评论(0) 推荐(1)

React Context 与 Zustand Store 集成方案

摘要：引言在现代 React 应用开发中，状态管理一直是开发者面临的核心挑战之一。虽然 Redux 曾是主流解决方案，但其繁琐的样板代码让许多开发者望而却步。Zustand 作为一个轻量级的状态管理库，提供了更简洁的 API 和更好的 TypeScript 支持，同时还能与 React Context 阅读全文

posted @ 2025-08-06 13:57 guangzan 阅读(133) 评论(0) 推荐(0)

理解 React 中的 useEffect、useMemo 与 useCallback

摘要：

![](https://img2023.cnblogs.com/blog/1501373/202305/1501373-20230508094607697-173292978.jpg) ## useEffect 先理解 useEffect 有助于学习 useMemo 和 useCallback。因为阅读全文

posted @ 2023-05-08 09:46 guangzan 阅读(4166) 评论(2) 推荐(5)

在 UmiJS 中使用 TailwindCSS

摘要：我的 umijs 版本 "umi": "^3.5.13" 当前版本 umi 使用了 PostCSS7，安装兼容 PostCSS7 版本的 TailwindCSS 即可： yarn add tailwindcss@npm:@tailwindcss/postcss7-compat .umirc.ts / 阅读全文

posted @ 2021-07-25 23:23 guangzan 阅读(2512) 评论(0) 推荐(0)

React 样式解决方案 styled-components

摘要：前置在 react 中解决组件样式冲突的方案中，如果您喜欢将 css 与 js 分离，可能更习惯于 CSS-Modules；如果习惯了 Vue.js 那样的单文件组件，可能习惯于使用 styled-components 来解决这个问题。使用 CSS-Modules 从老项目迁移过来可能更容易。安阅读全文

posted @ 2020-08-06 19:18 guangzan 阅读(2007) 评论(0) 推荐(1)

reactDOM

摘要：前置 react-dom 提供了可在应用顶层使用的 DOM（DOM-specific）方法。 render() hydrate() unmountComponentAtNode() findDOMNode() createPortal() 你可以使用以下命令在本地启动一个 node 服务器，运行本文阅读全文

posted @ 2020-07-05 15:06 guangzan 阅读(551) 评论(0) 推荐(0)

Redux 一步到位

摘要：简介 Redux 是 JavaScript 状态容器，提供可预测化的状态管理 Redux 除了和 React 一起用外，还支持其它库（ jquery ... ）它体小精悍（只有2kB，包括依赖）由 Flux 演变而来，但受 Elm 的启发，避开了 Flux 的复杂性。安装稳定版附加包 Re 阅读全文

posted @ 2020-01-19 18:01 guangzan 阅读(489) 评论(2) 推荐(2)

React Hooks 学习

摘要：useState 用来声明状态变量。 import React, { useState } from 'react'; // ... const [ count , setCount ] = useState(0); // ... count 声明的变量 setCount 设用来更新变量的函数 0 阅读全文

posted @ 2020-01-19 10:52 guangzan 阅读(665) 评论(0) 推荐(0)

随笔分类 - React

公告