中级第 8 / 17 节40 分钟 · 实操
使用 useEffect 实现副作用 (Effects)
React 课程的一部分
到目前为止，组件的工作一直是：看一眼自己当前的属性 (props) 和状态，然后回答一个问题，此刻屏幕上该显示什么。只要输入相同，这个答案每次都应该一模一样，就像计算器算 2 + 2，按多少次等号结果都不变。但真实的应用还得做一些不属于"算出一个答案"的事：让时钟走起来、打开一个连接、向服务器要数据、从浏览器的存储里读点东西。这些都塞不进"决定该渲染什么"里面，而硬塞进组件函数体里会造成实实在在的破坏，那段代码每次渲染都会跑一遍，还常常又触发一次渲染，如此没完没了。useEffect 就是 React 给出的答案：把这段代码跑起来，但要等渲染之后，而且只在确实需要重跑的时候才重跑。
副作用指的是一段代码做了任何超出"接收输入、返回一个值"范围的事：碰了定时器、网络连接、浏览器 API，或者其他任何独立于你的组件而存在的东西。渲染组件本身绝不应该引发这类事情，渲染被设计成可以安全地跑任意多次，包括 React 只是为了检查有没有变化而跑的那些次。你会不断遇到的常见副作用有 ...
想在真实环境里学习 React 使用 useEffect 实现副作用 (Effects) 吗？
点击下方，立即获得一台预装 React 的 Linux 主机，跟懂你代码的 AI 导师一起完成 使用 useEffect 实现副作用 (Effects) 的实操练习。
开始这节课使用 useEffect 实现副作用 (Effects)你将学到什么
- What counts as a side effect
- UseEffect signature
- Dependency array
- Running on mount only
- Cleanup function
- Subscribe/unsubscribe pattern
用你的语言阅读本课
本课程的所有课时
17 节- 1什么是 React？25 分钟
- 2JSX 与组件 (Components)30 分钟
- 3属性 (Props)30 分钟
- 4使用 useState 管理状态 (State)35 分钟
- 5处理事件30 分钟
- 6条件渲染与列表30 分钟
- 7表单与受控输入 (Controlled Inputs)35 分钟
- 8使用 useEffect 实现副作用 (Effects)40 分钟
- 9数据获取40 分钟
- 10组件组合 (Component Composition)35 分钟
- 11Context 与 useContext35 分钟
- 12useReducer35 分钟
- 13自定义钩子 (Hooks)35 分钟
- 14性能与记忆化 (Memoization)35 分钟
- 15使用 React Router 进行路由40 分钟
- 16测试 React 组件 (Components)40 分钟
- 17顶点项目：待办事项应用60 分钟
探索其他课程
Python
19 节 · 9.3小时
Go
20 节 · 12.3小时
Linux
17 节 · 8.5小时
Docker
13 节 · 6.6小时
Git
13 节 · 5.9小时
Kubernetes
14 节 · 8小时
Ansible
12 节 · 6.1小时
Bash
12 节 · 5.7小时
Helm
10 节 · 5.4小时
GitLab CI
11 节 · 5.8小时
Jenkins
11 节 · 5.3小时
PostgreSQL
14 节 · 7.6小时
MySQL
13 节 · 6.8小时
Web
14 节 · 5.9小时
TypeScript
18 节 · 7.7小时
Vibe Coding
12 节 · 5.8小时
Prompt Engineering
11 节 · 6.2小时
Vibe 编程：基础
12 节 · 4.5小时
Vibe 编程：从原型到生产
12 节 · 5.5小时
Vibe 编程：多智能体工程
12 节 · 5.3小时
Vibe 编程：高级工程
12 节 · 7.3小时