React 基础：使用组件构建用户界面

React 核心概念

开始构建 React 应用前，您需要熟悉以下三个核心概念：

组件 (Components)
属性 (Props)
状态 (State)

在接下来的章节中，我们将逐一介绍这些概念，并提供继续学习的资源。熟悉这些概念后，我们将展示如何安装 Next.js 并使用服务端组件 (Server Components) 和客户端组件 (Client Components) 等新特性。

组件

用户界面可以拆分为更小的构建块，称为组件。

组件允许您构建自包含、可复用的代码片段。如果将组件视为乐高积木，您可以将这些独立积木组合起来形成更大的结构。当需要更新部分用户界面时，只需更新特定的组件或"积木"即可。

这种模块化设计使您的代码在增长时更易于维护，因为您可以添加、更新和删除组件而无需改动应用的其他部分。

React 组件的优势在于它们本质上就是 JavaScript。让我们从 JavaScript 角度看看如何编写 React 组件：

创建组件

在 React 中，组件就是函数。在 script 标签内创建一个名为 header 的新函数：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
  }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

组件是返回 UI 元素的函数。在函数的 return 语句中，您可以编写 JSX：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

要将此组件渲染到 DOM，将其作为第一个参数传递给 root.render() 方法：

index.html

<script type="text/jsx">
  const app = document.getElementById("app")
 
  function header() {
     return (<h1>Develop. Preview. Ship.</h1>)
   }
 
  const root = ReactDOM.createRoot(app);
  root.render(header);
</script>

但请注意，如果直接在浏览器中运行上述代码会出现错误。要使代码正常工作，需要做两件事：

首先，React 组件名称应大写以区别于普通 HTML 和 JavaScript：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
// 大写 React 组件名称
root.render(Header);

其次，使用 React 组件的方式与常规 HTML 标签相同，需要使用尖括号 <>：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

再次在浏览器中运行代码，即可看到效果。

嵌套组件

应用通常包含比单个组件更多的内容。您可以像嵌套 HTML 元素一样嵌套 React 组件。

在示例中创建一个名为 HomePage 的新组件：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return <div></div>;
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

然后将 <Header> 组件嵌套到新的 <HomePage> 组件中：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      {/* 嵌套 Header 组件 */}
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<Header />);

组件树

通过这种方式不断嵌套 React 组件，可以形成组件树。

例如，顶级 HomePage 组件可以包含 Header、Article 和 Footer 组件。而这些组件又可以有自己的子组件，依此类推。比如 Header 组件可能包含 Logo、Title 和 Navigation 组件。

这种模块化格式允许您在应用的不同位置复用组件。

在项目中，由于 <HomePage> 现在是顶级组件，可以将其传递给 root.render() 方法：

index.html

function Header() {
  return <h1>Develop. Preview. Ship.</h1>;
}
 
function HomePage() {
  return (
    <div>
      <Header />
    </div>
  );
}
 
const root = ReactDOM.createRoot(app);
root.render(<HomePage />);

延伸阅读：

第一个组件

导入和导出组件

使用组件构建用户界面

React 核心概念

组件

创建组件

嵌套组件

组件树

On this page