Component Tree 组件树

最后更新：2026-10-28

React 应用由组件嵌套组成一棵树：根组件在顶部，子组件层层向下。数据沿树单向向下流动（通过 props），理解这棵树有助于规划组件拆分粒度和状态应该放在哪一层。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

<App>              ← 根组件
  <Header />       ← 子组件
  <TodoList>
    <TodoItem />   ← 更深一层；数据经 props 自上而下传递
  </TodoList>
</App>

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

页面显示根组件标题，下方两张带边框的面板（今天 / 明天），每个面板里以列表行展示任务——正好对应「根组件 → 面板 → 行」的三层组件树。

ℹ️ 说明 组件树描述的是「组合关系」，DOM 树描述的是「页面元素」；两者相似但不是一回事。

💡 提示 多个组件共用同一份数据时，把状态提升到它们最近的公共父组件，再经 props 分发。

⚠️ 注意 层级过深会让 props 层层透传变冗长，跨层级共享可改用 Context 或状态库。

更多案例整理中，敬请期待。

Q React 组件树和 DOM 树是一回事吗？

A 不是。组件树是 JSX 的组合结构，DOM 树是浏览器里真实的页面节点；一个组件可能渲染零个、一个或多个 DOM 节点。

Q 状态应该放在组件树的哪一层？

A 放在需要它的组件们「最近的公共父组件」上；只属于单组件的内部细节就留在该组件，避免过度提升。

Q 如何避免组件树层级太深？

A 优先组合（children）而非层层包装；跨多层的固定数据用 Context；渲染优化交给 memo 而不是手动调层级。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。