内蒙古微网站建设,网站短信验证怎么做,37网游官网,室内设计公司排名及案例参考文章
组件的定义和使用
组件是 React 的核心概念之一。它们是构建用户界面#xff08;UI#xff09;的基础。
组件#xff1a;UI 构成要素
在 Web 当中#xff0c;HTML 允许使用其内置的标签集#xff08;如 h1 和 li#xff09;创建丰富的结构化…参考文章
组件的定义和使用
组件是 React 的核心概念之一。它们是构建用户界面UI的基础。
组件UI 构成要素
在 Web 当中HTML 允许使用其内置的标签集如 h1 和 li创建丰富的结构化文档
articleh1我的第一个组件/h1olli组件UI 构成要素/lili定义组件/lili使用组件/li/ol
/articlearticle 表示这篇文章h1 表示文章的标题ol 以有序列表的形式表示文章的缩写的目录。每一个侧边栏、头像、模态框、下拉框的背后都是像这样的结合了用于样式的 CSS 和用于交互的 JavaScript的标签——在 Web 上看到的每一个 UI 模块。
React 允许将标签、CSS 和 JavaScript 组合成自定义“组件”即应用程序中可复用的 UI 元素。 上文中表示目录的代码可以改写成一个能够在每个页面中渲染的 TableOfContents / 组件。实际上使用的依然是 article、h1 等相同的 HTML 标签。
就像使用 HTML 标签一样可以组合、排序和嵌套组件来绘制整个页面。例如下面的文档页面就是由 React 组件构成的
PageLayoutNavigationHeaderSearchBar /Link to/docs文档/Link/NavigationHeaderSidebar /PageContentTableOfContents /DocumentationText //PageContent
/PageLayout随着项目的发展会发现很多布局可以通过复用已经完成的组件来实现从而加快开发进程。上文中提到的目录可以通过 TableOfContents / 组件添加到任意的画面中也可以使用 React 开源社区分享的大量组件例如 Chakra UI 和 Material UI来快速启动项目。
定义组件
一直以来创建网页时Web 开发人员会用标签描述内容然后通过 JavaScript 来增加交互。这种在 Web 上添加交互的方式能产生出色的效果。现在许多网站和全部应用都需要交互。React 最为重视交互性且使用了相同的处理方式React 组件是一段可以 使用标签进行扩展 的 JavaScript 函数。如下所示
export default function Profile() {return (imgsrchttps://i.imgur.com/MK3eW3Am.jpgaltKatherine Johnson/)
}以下是构建组件的方法
第一步导出组件
export default 前缀是一种 JavaScript 标准语法非 React 的特性。它允许导出一个文件中的主要函数以便以后可以从其他文件引入它。
第二步定义函数
使用 function Profile() { } 定义名为 Profile 的 JavaScript 函数。
注意React 组件是常规的 JavaScript 函数但组件的名称必须以大写字母开头否则它们将无法运行
第三步添加标签
这个组件返回一个带有 src 和 alt 属性的 img / 标签。img / 写得像 HTML但实际上是 JavaScript这种语法被称为 JSX它允许在 JavaScript 中嵌入使用标签。
返回语句可以全写在一行上如下面组件中所示
return img srchttps://i.imgur.com/MK3eW3As.jpg altKatherine Johnson /;但是如果标签和 return 关键字不在同一行则必须把它包裹在一对括号中如下所示
return (divimg srchttps://i.imgur.com/MK3eW3As.jpg altKatherine Johnson //div
);注意没有括号包裹的话任何在 return 下一行后面的代码都 将被忽略
使用组件
现在已经定义了 Profile 组件可以在其他组件中使用它。例如可以导出一个内部使用了多个 Profile 组件的 Gallery 组件
function Profile() {return (imgsrchttps://i.imgur.com/MK3eW3As.jpgaltKatherine Johnson/);
}export default function Gallery() {return (sectionh1了不起的科学家/h1Profile /Profile /Profile //section);
}浏览器所看到的
注意下面两者的区别
section是小写的所以 React 知道指的是 HTML 标签。Profile / 以大写 P 开头所以 React 知道想要使用名为 Profile 的组件。
然而 Profile 包含更多的 HTMLimg /。这是浏览器最后所看到的
sectionh1了不起的科学家/h1img srchttps://i.imgur.com/MK3eW3As.jpg altKatherine Johnson /img srchttps://i.imgur.com/MK3eW3As.jpg altKatherine Johnson /img srchttps://i.imgur.com/MK3eW3As.jpg altKatherine Johnson /
/section嵌套和组织组件
组件是常规的 JavaScript 函数所以可以将多个组件保存在同一份文件中。当组件相对较小或彼此紧密相关时这是一种省事的处理方式。如果这个文件变得臃肿也可以随时将 Profile 移动到单独的文件中。
因为 Profile 组件在 Gallery 组件中渲染甚至好几次可以认为 Gallery 是一个 父组件 将每个 Profile 渲染为一个“孩子”。这是 React 的神奇之处可以只定义组件一次然后按需多处和多次使用。
注意组件可以渲染其他组件但是 请不要嵌套他们的定义
export default function Gallery() {// 永远不要在组件中定义组件function Profile() {// ...}// ...
}上面这段代码 非常慢并且会导致 bug 产生。 因此应该在顶层定义每个组件
export default function Gallery() {// ...
}// 在顶层声明组件
function Profile() {// ...
}当子组件需要使用父组件的数据时需要 通过 props 的形式进行传递而不是嵌套定义。
摘要
React关键点
React 允许创建组件应用程序的可复用 UI 元素。在 React 应用程序中每一个 UI 模块都是一个组件。React 是常规的 JavaScript 函数除了 它们的名字总是以大写字母开头。它们返回 JSX 标签。
参考文章
组件的导入与导出
组件的神奇之处在于它们的可重用性可以创建一个由其他组件构成的组件。但当嵌套了越来越多的组件时则需要将它们拆分成不同的文件。这样可以使得查找文件更加容易并且能在更多地方复用这些组件。
根组件文件
创建一个 Profile 组件并且渲染在 Gallery 组件里。
// App.js
function Profile() {return (imgsrchttps://i.imgur.com/MK3eW3As.jpgaltKatherine Johnson/);
}export default function Gallery() {return (sectionh1了不起的科学家们/h1Profile /Profile /Profile //section);
}在此示例中所有组件目前都定义在根组件 App.js 文件中在 Create React App 中应用应在 src/App.js 文件中定义。具体还需根据项目配置决定有些根组件可能会声明在其他文件中。如果使用的框架基于文件进行路由如 Next.js那每个页面的根组件都会不一样。
导出和导入一个组件
如果将来需要在首页添加关于科学书籍的列表亦或者需要将所有的资料信息移动到其他文件。这时将 Gallery 组件和 Profile 组件移出根组件文件会更加合理。这会使组件更加模块化并且可在其他文件中复用。可以根据以下三个步骤对组件进行拆分
创建 一个新的 JS 文件来存放该组件。导出 该文件中的函数组件可以使用 默认导出 或 具名导出在需要使用该组件的文件中 导入可以根据相应的导出方式使用 默认导入 或 具名导入。
这里将 Profile 组件和 Gallery 组件从 App.js 文件中移动到了 Gallery.js 文件中。修改后即可在 App.js 中导入 Gallery.js 中的 Gallery 组件:
// App.js
import Gallery from ./Gallery.js;export default function App() {return (Gallery /);
}// Gallery.js
function Profile() {return (imgsrchttps://i.imgur.com/QIrZWGIs.jpgaltAlan L. Hart/);
}export default function Gallery() {return (sectionh1了不起的科学家们/h1Profile /Profile /Profile //section);
}该示例中需要注意的是如何将组件拆分成两个文件
Gallery.js: 定义了 Profile 组件该组件仅在该文件内使用没有被导出。使用 默认导出 的方式将 Gallery 组件导出 App.js: 使用 默认导入 的方式从 Gallery.js 中导入 Gallery 组件。使用 默认导出 的方式将根组件 App 导出。
注意引入过程中可能会遇到一些文件并未添加 .js 文件后缀如下所示
import Gallery from ./Gallery;无论是 ./Gallery.js 还是 ./Gallery在 React 里都能正常使用只是前者更符合 原生 ES 模块。
从同一文件中导出和导入多个组件
如果只想展示一个 Profile 组件而不展示整个图集。也可以导出 Profile 组件。但 Gallery.js 中已包含 默认 导出此时不能定义 两个 默认导出。但可以将其在新文件中进行默认导出或者将 Profile 进行 具名 导出。同一文件中有且仅有一个默认导出但可以有多个具名导出
注意为了减少在默认导出和具名导出之间的混淆一些团队会选择只使用一种风格默认或者具名或者禁止在单个文件内混合使用。这因人而异选择最适合的即可
首先用具名导出的方式将 Profile 组件从 Gallery.js 导出不使用 default 关键字
export function Profile() {// ...
}接着用具名导入的方式从 Gallery.js 文件中 导入 Profile 组件用大括号:
import { Profile } from ./Gallery.js;最后在 App 组件里 渲染 Profile /
export default function App() {return Profile /;
}现在Gallery.js 包含两个导出一个是默认导出的 Gallery另一个是具名导出的 Profile。App.js 中均导入了这两个组件。尝试将 Profile / 改成 Gallery /回到示例中
// App.js
import Gallery from ./Gallery.js;
import { Profile } from ./Gallery.js;export default function App() {return (Profile /);
}// Gallery.js
export function Profile() {return (imgsrchttps://i.imgur.com/QIrZWGIs.jpgaltAlan L. Hart/);
}export default function Gallery() {return (sectionh1了不起的科学家们/h1Profile /Profile /Profile //section);
}示例中混合使用了默认导出和具名导出
Gallery.js 使用 具名导出 的方式将 Profile 组件导出并取名为 Profile。使用 默认导出 的方式将 Gallery 组件导出。 App.js 使用 具名导入 的方式从 Gallery.js 中导入 Profile 组件并取名为 Profile。使用 默认导入 的方式从 Gallery.js 中导入 Gallery 组件。使用 默认导出 的方式将根组件 App 导出。
