文章详情

登录

短信预约-IT技能 免费直播动态提醒

• 地区
• 手机号
• 验证码获取验证

立即预约

选择考试省份

• 北京
• 上海
• 天津
• 重庆
• 河北
• 山东
• 辽宁
• 黑龙江
• 吉林
• 甘肃
• 青海
• 河南
• 江苏
• 湖北
• 湖南
• 江西
• 浙江
• 广东
• 云南
• 福建
• 海南
• 山西
• 四川
• 陕西
• 贵州
• 安徽
• 广西
• 内蒙
• 西藏
• 新疆
• 宁夏
• 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

React 入门第三步：了解组件的概念及应用

2024-12-14 01:12

关注

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于 JavaScript 函数。

它接受任意的入参(即 “props”)，并返回用于描述页面展示内容的 React 元素。分为函数组件与 class 类组件。

学习组件之前，可以先安装一个 VS Code 插件，直接搜索 react , 选择下载量最高的就行了。

函数组件与类组件

顾名思义，函数组件就是使用函数创建的组件，类组件就是使用类创建组件，安装好插件之后，可以直接使用简写补全功能创建对应插件。

注意，首字母要大写。

函数组件的创建

编辑器快捷方式：rfce

import React from'react' 
 
functionComponentFun() { 
  return ( 
    
 
      
单文件函数组件
 
    

 

  ) 

} 

 

exportdefault ComponentFun 

声明函数，并在函数中返回 JSX ，最后导出函数。

类组件的创建

编辑器快捷方式：rce

import React, { Component } from'react' 
 
exportclass ComponentClass extends Component { 
  render() { 
    return ( 
      
 
        
单文件类组件
 
      

类组件需要继承 Component，因此需要进行导入。如果不导入，则需要继承React.Component。

同时，类中需要调用 render() 渲染函数，在渲染函数中，return 返回对应的 JSX。

组件的引入与使用

组件的使用也很简单，按模块化语法引入之后，直接当作标签在 JSX 中使用。

import React from'react' 
// 引入单文件组件 
import ComponentClass from'./ComponentClass' 
import ComponentFun from'./ComponentFun' 
 
 
functionApp() { 
  return ( 
    
 
      {} 
       
       
     
  ) 
} 
 
exportdefault App 

因为 JSX 必须有一个根节点，因此在引入使用后，渲染的结果中，会出现多个 div 嵌套，比如下面这样子的：

为了解决这个问题，React 提供了 “片段” 组件 Fragment ，它允许你将子列表分组，渲染后不会向 DOM 添加额外节点：

import React, { Component,Fragment } from'react' 
 
exportclass ComponentClass extends Component { 
  render() { 
    return ( 
       
        
单文件类组件
 
       
    ) 
  } 
} 
 
exportdefault ComponentClass 

使用也很简单，就是引入后，将 JSX 中的div 根节点替换即可，最终渲染后的 DOM 如下：

"root">
单文件类组件
单文件函数组件
 

首页课程

资料下载问答资讯