JavaScript基础课程二十四、React Hooks 与实战

本课是 React 开发的核心进阶课程聚焦 React Hooks 函数式编程体系。Hooks 彻底改变了 React 开发模式让函数组件拥有状态与副作用能力代码更简洁、逻辑更聚合。课程从基础 useState、useEffect、useRef 到性能优化 useMemo、useCallback再到自定义 Hooks 封装全面覆盖企业级 React 必备技能。通过单词实战案例将状态管理、异步请求、DOM 操作、逻辑复用串联起来帮助建立函数式编程思维。掌握本课内容可独立开发标准 React 项目轻松对接接口、处理副作用、优化性能是 React 从入门到实战的关键一课。一、课程学习目的深入理解 React Hooks 的设计理念与核心作用掌握函数式组件的状态与副作用管理。熟练掌握常用 HooksuseState、useEffect、useRef、useMemo、useCallback。学会自定义 Hooks 封装复用逻辑提升代码模块化与可维护性。掌握 React 性能优化基础手段避免无效渲染。能够使用 Hooks 完成完整实战项目对接异步请求与业务逻辑。建立 React 函数式编程思维适配企业级 React 开发标准。二、核心知识点讲解1. React Hooks 概述Hooks 是 React 16.8 推出的特性让函数式组件拥有状态、生命周期、副作用等能力彻底替代类组件。Hooks 只能在函数组件顶层使用不能在循环、条件、普通函数中调用。优势代码更简洁、逻辑更聚合、复用性更强、易于测试。2. 基础必备 HooksuseState组件状态管理修改状态自动触发视图更新。useEffect副作用处理异步请求、定时器、DOM 操作。useRef获取 DOM 元素、存储跨渲染数据。useMemo缓存计算结果避免重复计算。useCallback缓存函数避免子组件重复渲染。3. 自定义 Hooks自定义 Hooks 是以 use 开头的函数内部可调用其他 Hooks用于封装可复用逻辑如请求、表单、定时器。作用抽离公共逻辑、简化组件、提高可读性。4. useEffect 依赖规则空数组[]仅挂载、卸载时执行一次。带依赖[a,b]依赖变化时执行。无依赖每次渲染都执行。必须正确处理依赖避免死循环。5. React 状态更新规则状态不可直接修改必须通过set 函数返回新值。对象/数组需使用展开语法创建新引用。三、示例程序带详细注释示例1useState useEffect 异步请求import { useState, useEffect } from react function WordList() { // 状态管理 const [wordList, setWordList] useState([]) const [loading, setLoading] useState(false) // 副作用页面加载请求数据 useEffect(() { async function getList() { setLoading(true) // 模拟请求 const res await new Promise(r setTimeout(() r([ { en: book, cn: 书 }, { en: pen, cn: 笔 } ]), 1000)) setWordList(res) setLoading(false) } getList() }, []) // 空依赖 → 只执行一次 return ( div {loading p加载中.../p} {wordList.map((item, i) ( div key{i}{item.en} - {item.cn}/div ))} /div ) }示例2useRef 获取 DOMimport { useRef } from react function InputFocus() { const inputRef useRef(null) const focus () { // 操作原生 DOM inputRef.current.focus() } return ( div input ref{inputRef} / button onClick{focus}聚焦/button /div ) }示例3自定义 Hooks封装单词请求// hooks/useWord.js import { useState, useEffect } from react // 自定义 Hook export function useWord() { const [wordList, setWordList] useState([]) useEffect(() { setTimeout(() { setWordList([{ en: react, cn: React }]) }, 800) }, []) return wordList } // 组件中使用 function App() { const wordList useWord() return div{wordList.map(i div key{i.en}{i.en}/div)}/div }示例4useMemo 缓存计算import { useMemo } from react function totalWord(wordList) { console.log(计算总数) return wordList.length } function App({ wordList }) { // 缓存结果只有 wordList 变化才重新计算 const count useMemo(() totalWord(wordList), [wordList]) return div总数{count}/div }四、掌握技巧与方法Hooks 必须在函数顶层调用不能在 if / for / 普通函数里使用。useEffect 必须正确配置依赖避免死循环或不执行。状态不可变不能直接 push / splice必须返回新数组/对象。公共逻辑抽离为自定义 Hooks实现逻辑复用。useRef 可存储任何不需要触发渲染的数据。useMemo / useCallback 用于性能优化不要过度使用。异步请求必须放在 useEffect 或自定义 Hooks 中。五、课后作业基础作业使用 useState useEffect 实现单词列表异步加载展示 loading 状态。使用 useRef 获取输入框 DOM实现按钮自动聚焦。了解 useMemo 缓存计算结果的用法。进阶作业封装一个自定义 Hook用于获取单词列表数据。实现单词搜索功能输入关键词实时过滤列表。使用 useEffect 清理定时器/订阅防止内存泄漏。实战作业开发 React 单词搜索系统包含异步加载、搜索过滤、状态管理、自定义 Hooks完整可运行。上一课前端框架实战React 基础实战作业代码代码功能说明本实战作业基于 Vite React 开发单词管理系统使用函数式组件与 JSX 语法通过 useState 管理响应式状态单词列表、输入框内容实现添加、删除单词核心功能利用 useEffect 在组件挂载时打印初始化日志通过 Props 将单词数据传递给子组件展示完成组件通信。页面包含输入框、操作按钮、列表渲染、空状态提示符合 React 基础开发规范完整覆盖 JSX、组件拆分、状态管理、事件处理、列表渲染等核心知识点帮助快速掌握 React 基础开发流程。注意事项必须安装 Node.js 环境使用 npm 安装依赖。React 使用 className 代替 classstyle 需写成对象格式。状态不可直接修改必须使用 set 函数生成新值。列表渲染 key 必须唯一建议使用唯一 id不推荐仅用 index。组件名必须大写文件后缀建议使用 .jsx。运行命令npm install → npm run dev。禁止在 return 中直接修改状态会导致无限渲染。完整实战代码项目结构react-word-demo/ ├── index.html ├── package.json └── src/ ├── main.jsx ├── App.jsx ├── components/ │ └── WordItem.jsx └── index.csssrc/main.jsximport React from react import ReactDOM from react-dom/client import App from ./App import ./index.css ReactDOM.createRoot(document.getElementById(root)).render( React.StrictMode App / /React.StrictMode )src/App.jsximport { useState, useEffect } from react import WordItem from ./components/WordItem function App() { const [wordList, setWordList] useState([ { en: apple, cn: 苹果 }, { en: banana, cn: 香蕉 } ]) const [inputEn, setInputEn] useState() const [inputCn, setInputCn] useState() useEffect(() { console.log(单词管理器已初始化) }, []) const addWord () { if (!inputEn || !inputCn) return setWordList([...wordList, { en: inputEn, cn: inputCn }]) setInputEn() setInputCn() } const delWord (index) { const newList [...wordList] newList.splice(index, 1) setWordList(newList) } return ( div classNameapp h2React 单词管理器/h2 div classNameinput-box input typetext placeholder英文 value{inputEn} onChange{(e) setInputEn(e.target.value)} / input typetext placeholder中文 value{inputCn} onChange{(e) setInputCn(e.target.value)} / button onClick{addWord}添加/button /div div classNamelist {wordList.length 0 ? ( p classNameempty暂无单词/p ) : ( wordList.map((item, index) ( WordItem key{index} item{item} index{index} delWord{delWord} / )) )} /div /div ) } export default Appsrc/components/WordItem.jsxexport default function WordItem({ item, index, delWord }) { return ( div classNameword-item span{item.en} — {item.cn}/span button onClick{() delWord(index)}删除/button /div ) }src/index.css.app { max-width: 600px; margin: 30px auto; padding: 20px; } .input-box { margin: 20px 0; } input { padding: 8px; margin-right: 6px; } button { padding: 8px 12px; background: #61dafb; border: none; cursor: pointer; border-radius: 4px; } .word-item { padding: 10px; background: #f5f5f5; margin: 6px 0; display: flex; justify-content: space-between; border-radius: 4px; } .empty { color: #999; padding: 20px 0; text-align: center; }运行命令npm install npm run dev作业验收标准项目可正常启动无报错。可添加、删除单词视图实时更新。空数据时展示空状态。使用 useState、useEffect 正确。组件拆分清晰Props 传参正常。代码规范、注释清晰、符合 React 基础标准。