想要仔细学习这个主题的内容吗？请参阅 保持组件纯粹 以学习如何将组件写成纯粹且可预测的函数。
阅读更多
将 UI 视为树
React 使用树形关系建模以展示组件和模块之间的关系。
React 渲染树是组件之间父子关系的表示。
示例的 React 渲染树
位于树顶部、靠近根组件的组件被视为顶层组件。没有子组件的组件被称为叶子组件。对组件的这种分类对于理解数据流和渲染性能非常有用。
对 JavaScript 模块之间的关系进行建模是了解应用程序的另一种有用方式。我们将其称为模块依赖树。
示例的模块依赖树
构建工具经常使用依赖树来捆绑客户端下载和渲染所需的所有 JavaScript 代码。对于 React 应用程序，打包大小会导致用户体验退化。了解模块依赖树有助于调试此类问题。
想要仔细学习这个主题的内容吗？阅读 将 UI 视为树 以了解如何为 React 应用程序创建渲染和模块依赖树，以及它们如何成为有效改善用户体验和性能的心理模型。
阅读更多
接下来应该……
请访问 你的第一个组件 这个章节并开始阅读！
如若你已熟悉这些主题，可直接阅读 添加交互 一节。