React 组件入门指南从拆分 UI 到创建可复用组件The Odin Project 课程实战【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum导读本篇文章围绕 react/getting_started_with_react/react_components.md 展开它是本项目 React 课程开始使用 React路径的核心入门课。你将学会把页面拆分为独立、可复用的组件掌握函数式组件Functional Components的写法与大小写命名规范并通过import/export在项目内组织组件文件。读完本文你能在自己的 Vite React 项目中亲手创建第一个自定义组件并把它渲染到页面上。什么是 React 组件React 的核心魅力在于它允许你把 UI用户界面拆分成独立、可复用的块这些块就是组件Components。组件是构成 React 应用的基本单元页面上的导航栏、文章正文、表单等都可以被抽象为一个个组件。下图展示了把一个小型网站拆分成组件后的直观效果该图片位于本仓库 react/getting_started_with_react/react_components/imgs/00.png对应原文档中的 Component Example 示意图以示意图中的网站为例它可以被拆分成如下组件App代表主应用是所有其他组件的父组件parentNavbar导航栏MainArticle渲染页面主内容的组件NewsletterForm一个让用户输入邮箱订阅周报的表单组件。可以把这些可复用组件想象成 JavaScript 函数它们接收某种输入后续课程中你会学到这就是 props并返回一个 React 元素。组件是渲染逻辑 内容在同一处封装的载体这也是 React 组织复杂 UI 的基石。如何创建函数式组件最直观的组件形式是函数式组件Functional Components——本质上就是 JavaScript 函数。看下面这个例子function Greeting() { return h1I swear by my pretty floral bonnet, I will end you./h1; }这段代码看起来大部分都很眼熟它是一个 JavaScript 函数返回 JSX。动手练习的步骤是打开你在上一课Vite React 项目搭建见 react/introduction/setting_up_a_react_environment.md中创建的项目新建一个名为Greeting.jsx的文件在文件里手写你自己的函数式组件名称随意返回任意你想要的 JSX注意函数命名必须首字母大写——这是 React 组件一个关键区别稍后会详述。我的 JavaScript 里怎么出现了 HTML这是JSX。它初看有点突兀但很快你就会体会到它的强大之处。JSX 是 JavaScript 的语法扩展允许你在 JavaScript 文件里书写类似 HTML 的标记。它本质上是 React createElement 中详细介绍。为什么组件必须大写React 组件必须大写首字母否则无法按预期工作这也是我们写Greeting()而不是greeting()的原因。当 JSX 被解析时React 正是依靠大小写来区分 HTML 标签和 React 组件实例Greeting /会被识别为你的 React 组件而greeting /会被解释成一个普通的 HTML 元素没有任何特殊含义。这也是原文档强调的关键区别务必牢记。组件文件放在哪里还记得我们把组件放在一个独立的文件里吗这让它独立于代码库的其他部分。不过独立固然好我们仍希望组件能复用别处定义的功能也希望能把组件分享给其他组件使用——靠的就是import和export。在很长一段时间里凡是用到 React 组件的 JavaScript 文件都必须显式import React但从React v17.0 起这不再是必须的JSX 转换不再要求 React 在作用域内。下面我们把新创建的组件export出去这样父组件就能在整个项目中把它当子组件使用function Greeting() { return h1I swear by my pretty floral bonnet, I will end you./h1; } export default Greeting;让 main.jsx 认识新组件等等还差一步我们已经声明并导出了组件但main.jsx还不知道它的存在。打开main.jsx可以看到render()正在渲染App组件。我们把它替换成刚创建的Greeting组件——前提是先正确地import它。最终结果大致如下import { StrictMode } from react; import { createRoot } from react-dom/client; import App from ./App.jsx; import Greeting from ./Greeting.jsx; import ./index.css; createRoot(document.getElementById(root)).render( StrictMode Greeting / /StrictMode, );入口文件在做什么这段代码与 Vite React 模板的默认入口一致可对照 react/introduction/setting_up_a_react_environment.md 中的main.jsx讲解StrictMode与createRoot分别从react与react-dom包导入App现在换成了Greeting从对应.jsx文件导入以便放进 DOM通过createRoot(document.getElementById(root))在index.html中找到挂载点再调用.render(...)把 JSX 渲染进去。再次提醒Greeting /必须大写你可以试试把 import、函数名和组件全改成小写看看会发生什么——JSX 解析时会把greeting /当成普通 HTML 标签你的闪亮新组件就失效了。至此你就成功导入并使用了第一个自定义组件恭喜练习创建更多组件含命名导出在同一个项目里继续练习创建一些新组件试试展示你最喜欢的食物之类的内容组件通常用默认导出default export但这次**尝试使用命名导出named exports**来替代默认导出。如果你不确定怎么写可以参考 MDN 关于 export 语句的文档。命名导出的写法示例供参考export function Greeting() { return h1Hello, World!/h1; }import { Greeting } from ./Greeting.jsx;与之相对默认导出的写法是export default Greeting;配合import Greeting from ./Greeting.jsx;。两种方式都允许父组件把子组件引入使用选择哪种取决于你的组织习惯。组件复用与数据传递更进一步创建出可复用组件后自然要问组件之间怎么共享数据这是紧接着的课程主题简述如下以帮助你理解组件在项目中的价值详细内容见 passing_data_between_components.mdReact 中数据通过props从父组件单向流向子组件数据流是单向的这让数据流动更可控、错误更少通过给组件传入不同 prop 值一个组件可以应对无数种变化避免为每种变体重复创建组件常用写法是解构 props如function Button({ text, color }) { ... }以及用默认参数设置默认值如text Click Me!让组件更健壮、更简洁还可以把函数作为 prop传给子组件如handleClick实现子组件触发父组件行为的事件回调。这些能力都与本文的组件概念一脉相承组件是封装的单元props 是它们之间的接口。渲染列表与条件渲染组件的常见用法为了让组件真正实用还需要会动态渲染数据。相关课程 rendering_techniques.md 提到两种核心技巧渲染列表用array.map(...)把数组映射成一组组件并给每个顶层组件一个key可视为组件的 ID用于帮助 React 在重渲染时准确识别实例{animals.map((animal) { return li key{animal}{animal}/li; })}条件渲染用三元运算符condition ? A / : B /、逻辑与condition A /或if/if-else/switch根据条件决定渲染什么例如先判断props.animals是否存在不存在显示 Loading...再判断列表是否为空。关于key的深入原理为什么动态列表必须给 key、index 作 key 的反模式、key 与 state 的关系等可继续阅读 keys_in_react.md。本课小结React 组件把 UI 拆分为独立、可复用的块像函数一样接收输入并返回 React 元素函数式组件就是返回 JSX 的 JavaScript 函数函数名与使用处标签都必须大写否则会被当作 HTML 元素组件放在独立文件中通过export默认导出或命名导出与import在项目中共享从 React 17.0 起使用 JSX 不再需要显式import Reactmain.jsx作为 Vite 应用的入口通过createRoot(...).render(YourComponent /)把组件挂载到 DOM组件是后续学习 props组件间传数据、状态state、Hooks 等一切 React 能力的基础。知识自测对照以下问题检验学习成果答案都在本文对应小节React 组件长什么样参见什么是 React 组件一节它是把 UI 拆成独立可复用块的单元本质是返回 React 元素的 JavaScript 函数如何创建一个函数式组件参见如何创建函数式组件一节写一个返回 JSX 且首字母大写的 JavaScript 函数如何导出再导入一个组件参见组件文件放在哪里一节先export default Greeting;再在入口文件import Greeting from ./Greeting.jsx;最后以Greeting /使用。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考