My App

应用程序结构

应用程序结构

无论大小如何,大多数 React 应用程序都将共享一个通用结构。

这是这种结构的一个例子。花点时间四处探索,看看一切是如何工作的:

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './components/App';

const root = createRoot(
  document.querySelector('#root')
);

root.render(<App />);

让我们分析这些文件。

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 模块系统将我们的应用程序拆分为多个文件。

继续前进

我想分享这个关于应用程序结构的快速课程,因为在接下来的课程中我们将多次使用它!

例如,您可能会看到类似这样的内容:

import FancyButton from './FancyButton';

function App() {
  return (
    <FancyButton>
      Click me!
    </FancyButton>
  );
}

export default App;

为保持注意力集中和精简,我们没有展示 index.js ,使用 createRoot 和 render() 调用。每当未显示时,您可以假定其渲染 App 组件。

部分沙盒中还会“秘密”包含一些最小的样式。如果您对某些样式的工作方式感到好奇,您可以在浏览器开发工具中检查它们!

On this page