属性与组合
传递属性，通过解构提供默认属性，比较组合与继承，了解 children/插槽模式，以及简单的展示型组件。
属性与组合 是 CoddyKit 上的免费 React Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 3 节课。
概览
目标：使用属性传递数据、设置默认值，并通过组合小型组件来构建用户界面。
- 属性将数据传入组件。
- 通过简单的解构设置默认值。
- 组合与子内容插槽。
传递属性
属性是只读输入。父组件渲染子组件并提供值；子组件从参数中读取这些值。
- 不要修改属性。
- 当父组件改变状态或属性时，会重新渲染。
默认属性（简单方式）
在参数列表中使用解构，为属性提供默认值：function Card({ title = "Untitled" })。
- 让组件更加稳健。
- 避免在标记中检查未定义值。
组合，而非继承
组合意味着使用更小的部分（子内容/插槽）构建更大的用户界面。为了灵活性和清晰的数据流，请优先使用组合，而不是继承。
示例：属性 + 子内容
示例：传递属性、设置默认值，并在简单的卡片布局中组合子内容。
<div id="root"></div>
可复用的展示型组件
展示型组件专注于布局和视觉效果；请尽可能让它们由属性驱动且无状态，以便轻松复用。
- 简洁的接口（仅使用属性）。
- 通过类名设置样式；避免隐藏的副作用。
组合与继承
回顾
回顾：使用属性传递数据、设置安全的默认值，并组合子内容来构建灵活、可复用的用户界面；避免基于继承的层级结构。
常见问题解答
「属性与组合」课时是免费的吗？
是的 — 「属性与组合」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 3 节课。
「属性与组合」这节课中我会学到什么？
传递属性，通过解构提供默认属性，比较组合与继承，了解 children/插槽模式，以及简单的展示型组件。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 React Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 React Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。
「属性与组合」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 React Academy 课中编写并运行代码吗？
能。每节 React Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。