中级第 10 / 17 节35 分钟 · 实操
组件组合 (Component Composition)
React 课程的一部分
你做了一张带边框和阴影的卡片，看着挺不错。现在你还要用同样的卡片去包一张照片，去包一个登录表单，再去包一串评论。这时候很容易做的事，是把卡片复制三份，或者给它加上能想到的每一种内容对应的属性：title、photoUrl、formFields、comments。这两条路的尽头，都是一个谁都不愿意去碰的组件。
出路是组合：把小东西一层层嵌进去搭出大东西，让每一块都不需要了解其他块。用相框来理解这件事很合适。相框的职责就是给里面装的东西围一圈边，而它履行这个职责时，既不知道也不关心里面装的是照片、证书还是小孩的涂鸦。写得好的 React 组件就是一个相框。这一课讲的是让这件事成为可能的两套机制：children 属性，以及把共享的状态挪到组件树里正确的位置。 ...
想在真实环境里学习 React 组件组合 (Component Composition) 吗？
点击下方，立即获得一台预装 React 的 Linux 主机，跟懂你代码的 AI 导师一起完成 组件组合 (Component Composition) 的实操练习。
开始这节课组件组合 (Component Composition)你将学到什么
- Children prop
- Wrapping components
- Passing JSX as props
- Lifting state up
- Thinking in component trees
用你的语言阅读本课
本课程的所有课时
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小时