React入门第三步：理解组件的概念和应用

组件让你可以将UI拆分成独立的可重用代码片段，独立构思每个片段。概念上类似于JavaScript函数。它采用任意输入参数（即“props”）并返回描述页面应显示内容的React元素。分为功能组件和类组件。学习组件之前，可以安装一个VSCode插件，直接搜索react，选择下载量最大的那个。函数组件和类组件顾名思义，函数组件就是使用函数创建的组件，类组件就是使用类创建的组件。安装插件后，可以直接使用速记补全功能创建对应的插件。注意第一个字母要大写。为函数组件创建编辑器快捷键：rfceimportReactfrom'react'functionComponentFun(){return(

)}exportdefaultComponentFun声明一个函数，在函数中返回JSX，最后导出函数。为类组件创建编辑器快捷方式：rceimportReact,{Component}from'react'exportclassComponentClassextendsComponent{render(){return()}}exportdefaultComponentClass类组件Component需要继承，所以需要引进。如果不引入，则需要继承React.Component。同时需要在类中调用render()渲染函数。在渲染函数中，return返回对应的JSX。组件的介绍和使用组件的使用也很简单。按照模块化语法引入后，可以直接在JSX中作为标签使用。importReactfrom'react'//引入单文件组件importComponentClassfrom'./ComponentClass'importComponentFunfrom'./ComponentFun'functionApp(){return(为了解决这个问题，React提供了“Fragment”组件Fragment，它允许你在渲染后不向DOM添加额外节点的情况下对子列表进行分组：>)}}exportdefaultComponentClass使用起来也很简单，就是导入之后，只需要替换JSX中的div根节点即可，最终渲染的DOM如下s:

单文件类组件

单文件功能组件