在上一节中我们已经了解了JSX的基础知识，现在是时候进一步深入，创建更多组件来构建我们的应用程序了。通过不断的学习不断的吸收新知识，我们将构建如下最终应用效果⬇️
我们的应用由三个主要部分组成：
- 顶部的标题栏，显示披萨店的名称
- 中间的菜单区域，展示六种不同的披萨
- 底部的页脚，告知用户餐厅当前开放状态，以及一个按钮（目前只是装饰性的）
菜单部分是应用的核心，我们会展示六种不同的披萨。注意到我们已经在第7篇文章里已经创建了披萨组件，在最终效果里这个组件将被重复使用六次来展示不同的披萨信息。
下面是之前第七篇文章里写好的代码结构⬇️，我们将继续这个代码不断布局组件
import React from "react";
import ReactDOM from "react-dom/client";
function App() {
return (
<div>
<h1>Fast React Pizza Co.</h1>
<Pizza />
<Pizza />
<Pizza />
</div>
);
}
function Pizza(){
return <div>
<img src="pizzas/spinaci.jpg"></img>
<h2>Pizza Spinaci</h2>
<p>Tomato, mozarella, spinach, and ricotta cheese</p>
</div>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);1. 创建Header组件
function Header() {
return <h1>Fast React Pizza Company</h1>;
}现在我们可以在App组件中使用这个Header组件，替换原来的h1元素。
JSX的美妙之处在于，我们可以像使用普通HTML元素一样使用我们的自定义组件。
2. 创建Footer组件
function Footer() {
return (
<footer>
We're currently open {new Date().toLocaleTimeString()}
</footer>
);
}注意我们如何在JSX中嵌入JavaScript表达式，显示当前时间。这正是JSX强大之处——能够将JavaScript与HTML无缝结合。
- 创建Menu组件
最后，让我们创建Menu组件来容纳所有的披萨：将App里面所有的<Pizza />放到Menu组件里⬇️
function Menu() {
return (
<div>
<h2>Our Menu</h2>
<Pizza />
<Pizza />
<Pizza />
{/* 更多Pizza组件... */}
</div>
);
}记住，JSX只允许有一个根元素，所以我们需要用一个div包裹所有内容。
组件嵌套与组合
现在我们的应用结构更加清晰和有组织性：⬇️
import React from "react";
import ReactDOM from "react-dom/client";
function App() {
return (
<div>
<Header />
<Menu />
<Footer />
</div>
);
}
function Header(){
return <h1>Fast React Pizza Co.</h1>
}
function Menu() {
return (
<div>
<h2>Our Menu</h2>
<Pizza />
<Pizza />
<Pizza />
{/* 更多Pizza组件... */}
</div>
);
}
function Footer(){
return <footer>{new Date().toLocaleDateString()}. We're currently open.</footer>
}
function Pizza(){
return <div>
<img src="pizzas/spinaci.jpg"></img>
<h2>Pizza Spinaci</h2>
<p>Tomato, mozarella, spinach, and ricotta cheese</p>
</div>
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);- App组件是最外层的容器
- 在App内部，我们嵌套了Header、Menu和Footer组件
- 在Menu组件内，我们又嵌套了多个Pizza组件
这正是React的核心理念——通过将小组件组合成更大的组件，最终构建出复杂的用户界面。小的Pizza组件组合成Menu组件，Menu再与Header和Footer组件共同组成完整的App组件。
渲染到DOM的过程
值得注意的是，当React将所有内容渲染到DOM时，实际的HTML中不会包含我们的组件名称。浏览器只能看到最终渲染出的HTML元素，如h1、div和footer等，而不知道这些元素来自于哪些React组件。
这种组件化的开发方式不仅使代码更加模块化和可维护，还能让我们更高效地复用UI元素，真正体现了”构建一次，使用多次”的理念。
函数组件的不同写法
最后补充一点，我们可以用多种方式定义React组件函数，除了上面使用的传统function声明外，还可以使用函数表达式或箭头函数：
// 函数表达式
const Test = function() {
return <div>测试组件</div>;
};
// 箭头函数
const Test = () => {
return <div>测试组件</div>;
};选择哪种写法主要取决于个人偏好，我个人更喜欢使用传统的function关键字声明组件。 通过这种组件化的方式构建应用，我们不仅代码结构更清晰，也为未来的扩展和维护打下了坚实的基础。
发表回复