应用程序结构
应用程序结构
无论大小如何,大多数 React 应用程序都将共享一个通用结构。
这是这种结构的一个例子。花点时间四处探索,看看一切是如何工作的:
让我们分析这些文件。
Index
根 index.js 文件通常是将要执行的第一部代码。它负责渲染我们的 React 应用程序,将我们编写的 React 元素转换为实时 DOM 节点。
通常,在整个代码库中只会有一个地方调用 react-dom 的 createRoot 和 render 方法。尽管可以有多个应用程序根节点,在逐步从其他框架或技术栈迁移至 React 时,通常只这样做。
在这个文件中做“设置”任务是很常见的。例如,这个文件是导入全局 CSS 文件或设置任何错误日志记录服务的好地方。
因为 index.js 更像是一个设置文件而不是应用程序的活动部分,我们通常不希望在这里渲染大量的 JSX。在这里包含标题、按钮和页脚会很奇怪;那些内容在应用程序中出现,而我们现在还在设置应用程序。
除了一些提供者组件(在课程后面讨论),该文件通常只呈现单个元素: <App /> 。
App
我们的项目中经常有一个称为 App 的组件,缩写为“Application”。
这是我们项目中的“主基”React 组件,是每个其他组件的祖先组件。在 React 应用程序中选择一个随机组件,你应该能够追溯到其 App 的血统。
此组件有时会管理“核心”布局内容,如页眉和页脚。在较小的应用程序中,就像这里显示的“hello world”示例中,我们会在该组件中渲染额外的 UI,尽管当应用程序变得更大时,我们通常不会看到太多这方面的内容。
如果您使用像 React Router 这样的路由解决方案,我们的顶级路由通常包含在此文件中。
每个项目都是不同的,如何构建这个组件没有硬性规定。重要的是 App 应该向开发人员展示应用程序的结构。这是开发人员检查、了解工作原理的主要基地。
Modules
通常我们使用 ES 模块系统将我们的应用程序拆分为多个文件。
继续前进
我想分享这个关于应用程序结构的快速课程,因为在接下来的课程中我们将多次使用它!
例如,您可能会看到类似这样的内容:
为保持注意力集中和精简,我们没有展示 index.js ,使用 createRoot 和 render() 调用。每当未显示时,您可以假定其渲染 App 组件。
部分沙盒中还会“秘密”包含一些最小的样式。如果您对某些样式的工作方式感到好奇,您可以在浏览器开发工具中检查它们!