学习React官方文档（描述UI）

个人简介

👀个人主页： 前端杂货铺
🙋‍♂️学习方向： 主攻前端方向，正逐渐往全干发展
📃个人状态： 研发工程师，现效力于中国工业软件事业
🚀人生格言： 积跬步至千里，积小流成江海
🥇推荐学习：🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js
🌕个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

创建 React 项目

GitHub提交记录

我们可以使用 vite 构建工具创建 react 项目。

npm create vite@latest my-app -- --template reactcd my-appnpm installnpm run dev

访问：http://localhost:5173/ 网址，即可得到如下页面。

我的第一个组件

GitHub提交记录

几个注意事项：

• React 组件是常规的 JavaScript 函数，但组件的名称必须以大写字母开头，否则它们将无法运行！
• 没有括号包裹的话，任何在 return 下一行的代码都将被忽略！
• 组件可以渲染其他组件，但是不要嵌套他们的定义，不然代码会非常慢，并且会导致 bug 产生。应该在顶层定义每个组件，当子组件需要使用父组件的数据时，需要通过 props 的形式进行传递，而不是嵌套定义。

添加 src/Profile.jsx 文件。

export default function Profile() {return (<><p>伟大的科学家</p><imgsrc="https://i.imgur.com/MK3eW3Am.jpg"alt="Katherine Johnson"/></>)
}

把 Profile.jsx 放入 App.jsx。

import './App.css'
import Profile from './Profile'function App() {return (<><Profile /></>)
}export default App

---

使用 JSX 书写标签语言

GitHub提交记录

JSX 是 JavaScript 语法扩展，可以让你在 JavaScript 文件中书写类似 HTML 的标签。

规则：

• 只能返回一个根对象
• 标签必须闭合
• 使用驼峰式命名法给 所有 大部分属性命名

创建 src/TodoList.jsx 文件，若不想在标签中增加一个额外的 <div>，可以用 <> 和 </> 元素来代替。这个空标签被称作 Fragment。React Fragment 允许你将子元素分组，而不会在 HTML 结构中添加额外节点。

为什么多个 JSX 标签需要被一个父元素包裹？

答：JSX 虽然看起来很像 HTML，但在底层其实被转化为了 JavaScript 对象，你不能在一个函数中返回多个对象，除非用一个数组把他们包装起来。这就是为什么多个 JSX 标签必须要用一个父元素或者 Fragment 来包裹。

为什么要使用驼峰命名？

答：JSX 最终会被转化为 JavaScript，而 JSX 中的属性也会变成 JavaScript 对象中的键值对。在你自己的组件中，经常会遇到需要用变量的方式读取这些属性的时候。但 JavaScript 对变量的命名有限制。例如，变量名称不能包含 - 符号或者像 class 这样的保留字。

export default function TodoList() {return (<><h1>海蒂·拉玛的待办事项</h1><img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" className="photo"style={{ width: '200px', borderRadius: '10px' }}/><ul><li>发明一种新式交通信号灯</li><li>排练一个电影场景</li><li>改进频谱技术</li></ul></>);
}

---

在 JSX 中通过大括号使用 JavaScript

GitHub提交记录

JSX 允许你在 JavaScript 中编写类似 HTML 的标签，从而使渲染的逻辑和内容可以写在一起。

在 JSX 中使用 JavaScript 很简单，只需要使用 {} 包裹着即可。有时我们会在 JSX 中看到 {{ 和 }}，其实它只不过是 包在大括号里的一个对象 罢了。

下面我们尝试在 TodoList.jsx 中通过 {} 使用 JavaScript。

export default function TodoList() {const person = {name: "海蒂·拉玛",avatar: "https://i.imgur.com/yXOvdOSs.jpg",theme: {backgroundColor: "orange",color: "white",borderRadius: "10px",padding: "10px",},todolist: ["发明一种新式交通信号灯", "排练一个电影场景", "改进频谱技术"],};return (<div style={person.theme}><h1>{person.name}的待办事项</h1><imgsrc={person.avatar}alt="Hedy Lamarr"className="photo"style={{ width: "200px", borderRadius: "10px" }}/><ul><li>{person.todolist[0]}</li><li>{person.todolist[1]}</li><li>{person.todolist[2]}</li></ul></div>);
}

---

将 Props 传递给组件

GitHub提交记录

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。

将父组件的信息传递给子组件非常的简单，只需要在父组件中定义需要传递的内容，然后在子组件中 通过参数接受 即可。

我们修改 src/Profile.jsx 文件。

import { getImageUrl } from "./utils";function Avatar({ person, size }) {const defaultStyle = {borderRadius: "50%",padding: "5px",};return (<><imgstyle={defaultStyle}className="avatar"src={getImageUrl(person)}alt={person.name}width={size}height={size}/></>);
}export default function Profile() {return (<div><Avatarsize={100}person={{name: "Katsuko Saruhashi",imageId: "YfeOqp2",}}/><Avatarsize={80}person={{name: "Aklilu Lemma",imageId: "OKS67lh",}}/><Avatarsize={50}person={{name: "Lin Lanying",imageId: "1bX5QH6",}}/></div>);
}

创建 src/utils.js 文件，里面编写工具类函数。

export function getImageUrl(person) {return "https://i.imgur.com/" + person.imageId + ".jpg";
}

GitHub提交记录

将内容嵌套在 JSX 标签中时，父组件将在名为 children 的 prop 中接收到该内容。例如，下面的 Card 组件将接收一个被设为 <Avatar /> 的 children prop 并将其包裹在 div 中渲染。

创建 src/Avatar.jsx 文件，放置头像。

import { getImageUrl } from "./utils";export default function Avatar({ person, size }) {const defaultStyle = {borderRadius: "50%",padding: "5px",};return (<imgstyle={defaultStyle}className="avatar"src={getImageUrl(person)}alt={person.name}width={size}height={size}/>);
}

修改 src/Profile.jsx 文件，添加 Card 方法，注意参数传递了 children，且在返回值中的 {children}。

import Avatar from "./Avatar";function Card({ children }) {const cardStyle = {padding: "20px",borderRadius: "10px",boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",backgroundColor: "#fff",};return <div style={cardStyle}>{children}</div>;
}export default function Profile() {return (<Card><Avatarsize={100}person={{name: "Katsuko Saruhashi",imageId: "YfeOqp2",}}/><Avatarsize={80}person={{name: "Aklilu Lemma",imageId: "OKS67lh",}}/><Avatarsize={50}person={{name: "Lin Lanying",imageId: "1bX5QH6",}}/></Card>);
}

---

条件渲染

GitHub提交记录

在 React 中，你可以通过使用 JavaScript 的 if 语句、&& 和 ? : 运算符来选择性地渲染 JSX。

创建 PackingList.jsx 文件，通过判断控制哪些事情已经完成。

function Item({ name, isPacked }) {let itemContent = name;if (isPacked) {itemContent = <del>{name + " ✅"}</del>;}return <li className="item">{itemContent}</li>;
}export default function PackingList() {return (<section><h1>Sally Ride 的行李清单</h1><ul><Item isPacked={true} name="宇航服" /><Item isPacked={true} name="带金箔的头盔" /><Item isPacked={false} name="Tam 的照片" /></ul></section>);
}

---

渲染列表

GitHub提交记录

从数组中过滤并渲染数据。

创建 src/data.js 文件，存放数组信息。

export const people = [{id: 0,name: "凯瑟琳·约翰逊",profession: "数学家",accomplishment: "太空飞行相关数值的核算",imageId: "MK3eW3A",},{id: 1,name: "马里奥·莫利纳",profession: "化学家",accomplishment: "北极臭氧空洞的发现",imageId: "mynHUSa",},{id: 2,name: "穆罕默德·阿卜杜勒·萨拉姆",profession: "物理学家",accomplishment: "关于基本粒子间弱相互作用和电磁相互作用的统一理论",imageId: "bE7W1ji",},{id: 3,name: "珀西·莱温·朱利亚",profession: "化学家",accomplishment: "开创性的可的松药物、类固醇和避孕药的研究",imageId: "IOjWm71",},{id: 4,name: "苏布拉马尼扬·钱德拉塞卡",profession: "天体物理学家",accomplishment: "白矮星质量计算",imageId: "lrWQx8l",},
];

创建 RenderList.jsx 文件，使用 filter 和 map，过滤并展示出化学家的相关信息。注意给数组里面的每一项都指定一个 key，进行唯一标识。

import { getImageUrl } from "./utils";
import { people } from "./data.js";export default function List() {const avatarStyle = {borderRadius: "50%",height: "100px",width: "100px",};const chemists = people.filter((person) => person.profession === "化学家");const listItems = chemists.map((person) => (<li key={person.id}><img style={avatarStyle} src={getImageUrl(person)} alt={person.name} /><p><b>{person.name}:</b>{" " + person.profession + " "}因 {person.accomplishment} 而闻名全世界！</p></li>));return <ul>{listItems}</ul>;
}

---

保持组件纯粹

1. 一个组件必须是纯粹的，就意味着：

• 只负责自己的任务。 它不会更改在该函数调用前就已存在的对象或变量。
• 输入相同，则输出相同。给定相同的输入，组件应该总是返回相同的 JSX。

2. 渲染随时可能发生，因此组件不应依赖于彼此的渲染顺序。
3. 你不应该改变任何用于组件渲染的输入。这包括 props、state 和 context。通过 “设置” state 来更新界面，而不要改变预先存在的对象。
4. 努力在你返回的 JSX 中表达你的组件逻辑。当你需要“改变事物”时，你通常希望在事件处理程序中进行。作为最后的手段，你可以使用 useEffect。

将 UI 视为树

GitHub提交记录

组件的一个主要特性是能够由其他组件组合而成。在 嵌套组件 中有父组件和子组件的概念，其中每个父组件本身可能是另一个组件的子组件。

下面我们使用 React 应用程序渲染一些鼓舞人心的引语。

修改 src/App.jsx 文件。

import "./App.css";
import FancyText from "./FancyText";
import InspirationGenerator from "./InspirationGenerator";
import Copyright from "./Copyright";function App() {return (<><FancyText title text="励志语录" /><InspirationGenerator><Copyright year={2025} /></InspirationGenerator></>);
}export default App;

创建 src/FancyText.jsx 文件，显示展示 “励志语录”。

export default function FancyText({ title, text }) {return title ? (<h1 className="fancy title">{text}</h1>) : (<h3 className="fancy cursive">{text}</h3>);
}

创建 src/InspirationGeneration.jsx 文件，显示主体部分。

import * as React from "react";
import quotes from "./quotes";
import FancyText from "./FancyText";export default function InspirationGenerator({ children }) {const [index, setIndex] = React.useState(0);const quote = quotes[index];const next = () => setIndex((index + 1) % quotes.length);return (<><p>你的励志名言是:</p><FancyText text={quote} /><button onClick={next}>再次激励我</button>{children}</>);
}

创建 Copyright.jsx 文件，显示版权。

export default function Copyright({ year }) {return <p className="small">©️ {year}</p>;
}

创建 quotes.js 文件，存放语录。

export default ["生活就像骑自行车，要保持平衡就得不断前进","每个人都是自己命运的建筑师","不要让别人的意见左右你的决定","人生的意义在于追求和实现自己的梦想",
];

---

总结

本篇文章，我们学习了 React 官方文档中讲述的 描述UI 的内容，总体上不算难，一些写法需要多加练习和记忆，下面文章我们学习 添加交互 部分。

好啦，本篇文章到这里就要和大家说再见啦，祝你这篇文章阅读愉快，你下篇文章的阅读愉快留着我下篇文章再祝！

参考资料：

1. React 官方文档：React 官方文档
2. DeepSeek：DeepSeek
3. VS Code · Copilot

---

---