react组件介绍、创建组件

发布时间:2023-11-11 15:00

目录

一 react组件介绍

二 创建组件的两种方式

2.1 使用函数创建组件

2.2 使用类创建组件    

 三 把组件抽离为独立的JS文件


一 react组件介绍


组件是react的一等公民,使用react就是在使用组件
组件表示页面中的部分功能
组合多个组件就可以实现完整的页面功能
特点:可复用、独立、可组合

二 创建组件的两种方式


2.1 使用函数创建组件


    函数组件:使用JS的函数(或箭头函数)创建的组件
    为了与普通函数做区分,react对函数组件做了如下约定:
        1 函数名字为大写字母开头
        2 组件必须有返回值,表示该组件的结构 → 返回值一般是JXL结构
          如果返回值为null,表示不渲染任何内容


    使用步骤
    1 定义函数(函数名称首字母大写)
    2 渲染函数组件
        用函数名作为组件的标签名称(首字母还是大写)
        组件标签可以使单标签,也可以是双标签
   

使用普通函数创建组件

//导入react
import React from "react";
import ReactDOM from "react-dom";

//定义函数组件
function Hello(){
    return (
这是一个函数组件
) } // 渲染组件 ReactDOM.render(, document.getElementById("root"));

效果

 

react组件介绍、创建组件_第1张图片

使用箭头函数创建组件

//导入react
import React from "react";
import ReactDOM from "react-dom";


//箭头函数组件
const Hello = ()=> 
这是一个箭头函数组件
// 渲染组件 ReactDOM.render(, document.getElementById("root"));

效果

react组件介绍、创建组件_第2张图片

 

2.2 使用类创建组件
    

类组件:使用es6的class创建的组件
为了与普通的class区分,有如下的约定:
    1 类名称以大写字母开头
    2 类组件继承React.Component, 从而可以使用父类的属性和方法
    3 类组件必须有render方法

      且render方法必须有返回值,表示该组件的结构  

       如果不渲染内容,就返回null
 
使用步骤:
    1 创建组件
    2 渲染组件

//导入react
import React from "react";
import ReactDOM from "react-dom";

//1 创建类组件
class Hello extends React.Component{
    render(){
        return (
这是一个类组件
) } } // 2 渲染组件 ReactDOM.render(, document.getElementById("root"));

效果

react组件介绍、创建组件_第3张图片

 三 把组件抽离为独立的JS文件

一般把组件放到一个单独的JS文件中(因为组件是一个独立的个体)


步骤
1 创建单独的js文件(导入React、创建组件(形式不限)、导出该组件)

创建的Hello.js

//导入react
import React from "react";

// 创建组件(可以是函数组件,也可以是类组件)
class Hello extends React.Component{
    render(){
        return (
这是一个独立的组件
) } } //导出该组件 export default Hello

2 index.js中导入刚刚创建的组件,并渲染组件

index.js

//导入react
import React from "react";
import ReactDOM from "react-dom";

//导入组件
import Hi from "./Hello"

// 渲染组件
ReactDOM.render(, document.getElementById("root"));

效果

react组件介绍、创建组件_第4张图片

 

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号