React 播客专栏 Vol.18|React 第二阶段复习 · 样式与 Hooks 全面整合

视频版

🎙 欢迎回到《前端达人 · React播客书单》第 18 期。

今天,我们将对第二阶段的内容进行系统复盘,重点是两个关键词:样式Hooks

  • 样式,决定组件"长什么样"

  • Hooks,决定组件"怎么动起来"

我们不但会回顾 CSS Modules、Emotion、Tailwind 的使用场景,还会穿插 useStateuseEffectuseRef 等核心 Hooks 的使用技巧,并在最后带来一个实战组件:可折叠面板 Accordion,来一次彻底的知识整合。

📦 第一部分:样式方案复习

✅ Plain CSS & CSS Modules

go 复制代码
// 传统方式
import './App.css'

// 模块化方案
import styles from './Button.module.css'
<button className={styles.primary}>Submit</button>

CSS Modules 优势:

  • 避免样式全局污染

  • 类名自动哈希化,适合组件封装

  • Create React App 默认支持

适用场景:中等规模组件项目,团队需要一定风格约束。

✅ Emotion:主流 CSS-in-JS 方案

go 复制代码
/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'

const style = css`
  background: #f0f0f0;
  padding: 16px;
`

优势:

  • 样式与逻辑写在一起,更具组件一致性

  • 允许使用 props 动态控制样式

  • 天然适配 TypeScript 类型系统

适用场景:组件库、设计系统需要逻辑控制样式的复杂交互组件

✅ Tailwind CSS:原子化的实用流派

go 复制代码
<button className="bg-indigo-600 text-white px-4 py-2 rounded">
  Click me
</button>

优势:

  • 无需命名 class,写一个类就是一个功能

  • class 命名语义明确、设计一致

  • 配合设计 token、组件库使用,提升协作效率

适用场景:页面开发、追求一致性的中大型前端项目

⚙️ 第二部分:Hooks 系统复盘

✅ useState vs useReducer

go 复制代码
const [count, setCount] = useState(0)

适用于简单状态(数字、布尔值、字符串)

go 复制代码
const [state, dispatch] = useReducer(reducer, initialState)

适用于复杂状态逻辑,如:

  • 多个字段一起更新

  • 状态变更依赖 action 类型

  • 希望将状态逻辑集中统一管理

📌 记住一句话:状态逻辑复杂,就用 useReducer

✅ useEffect:副作用处理专家

go 复制代码
useEffect(() => {
  fetchData()

  return () => cleanup()
}, [dependency])

掌握 3 种依赖数组写法:

依赖数组 执行时机
[] 组件首次挂载
[var] var 变化时执行
空(不填) 每次渲染后执行

✅ 性能与引用类 Hooks:useRef / useMemo / useCallback

Hook 场景
useRef 缓存 DOM 或值,不触发重渲染
useMemo 缓存计算结果,避免重复运算
useCallback 缓存函数引用,优化子组件渲染
go 复制代码
const total = useMemo(() => calculate(items), [items])
const handler = useCallback(() => doSomething(), [items])

🧪 第三部分:实战组件构建

🎯 目标:可折叠面板(Accordion)

功能说明:

  • 点击按钮,内容展开或收起

  • 内容高度自动适配,支持过渡动画

  • 无需引入三方库,完全自定义实现

💡 技术实现拆解

功能点 技术方案
状态控制 useState 管理 isExpanded
DOM 尺寸测量 useRef 获取 scrollHeight
触发动画 useEffect 控制 style.height
函数优化 useCallback 记忆点击事件
样式实现 Tailwind + transition 类名

🧱 精简实现代码(参考)

go 复制代码
const [isExpanded, setIsExpanded] = useState(false)
const contentRef = useRef<HTMLDivElement>(null)

useEffect(() => {
  const el = contentRef.current
  if (!el) return
  el.style.height = isExpanded ? `${el.scrollHeight}px` : '0px'
}, [isExpanded])

配合样式:

go 复制代码
<div className="overflow-hidden transition-all duration-300" ref={contentRef}>
  <p className="p-4">这里是内容区域</p>
</div>

📌 学习建议 & 调试技巧

  • 💻 React DevTools:观察状态、props 变化最强工具

  • 🧠 错误提示别忽略,TS 的类型报错=最佳调试助手

  • 📘 文档永远是第一资源:React Hooks 官方文档

✅ 总结与展望

已掌握 意义
样式模块化思路 让组件更美观、可维护
Hooks 使用模式 让组件更具行为逻辑和性能优化能力
实战练习能力 把知识点真正用于构建功能型组件

🔮 下一步内容:进入第三阶段

📌 主题:React 路由与远程数据处理

我们将学习:

  • react-router-dom 的现代写法

  • 动态路由参数与页面懒加载

  • API 数据请求与缓存逻辑

#React #React播客 #前端播客 #前端达人 #TypeScript

相关推荐
编程猪猪侠12 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞16 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路37 分钟前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失94940 分钟前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue86841 分钟前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架