什么是组件？

组件是用来构建用户UI页面的模块。React 允许你将标记、CSS 和 JavaScript 组合到应用的自定义 “组件”、可重用 UI 元素中。使用组件时可以像使用html标签一样，可以组合、排序和嵌套组件来设计整个页面。

一、定义组件

参考官网

function Imgtag() { return ( <img src="" alt=""> ) }

1.导出组件

通过 export default 它允许你在文件中标记主要函数，以便你以后可以从其他文件导入它。 export default function Imgtag() { return ( <img src="" alt=""> ) }

2.定义函数

使用常规的 function Name 定义函数名。

PS:React 组件是常规的 JavaScript 函数，但它们的名称必须以大写字母开头，否则它们将无法工作！

3.添加标记

该组件返回一个带有 src 和 alt 属性的 <img /> 标签。<img /> 写得像 HTML，但它实际上是 JavaScript！这种语法称为 JSX，它允许你在 JavaScript 中嵌入标记。（需要单独学习JSX语法）

PS:注意return的括号，以及函数的声明方式。

4.使用组件

把定义的组件，父页面使用即可。

二、根组件文件

根组件是指应用的最顶层组件，它负责渲染其他所有组件。根组件通常是使用ReactDOM.render()方法挂载到页面的某个元素上的组件。

导出和导入组件

1. 创建一个新的 JS 文件来放入组件。
2. 从该文件导出你的函数组件。
3. 将其导入到你将使用该组件的文件中。

默认与命名导出

javascript导出值有两种主要方法：默认导出和命名导出。根据自己的实际情况使用。

语法	导出声明	导入声明
默认	export default function Button() {}	import Button from './Button.js';
命名	export function Button() {}	import { Button } from './Button.js';