react组件介绍、创建组件

梨轻巧
579 阅读2分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一 react组件介绍

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

二 创建组件的两种方式

1 使用函数创建组件

  • 使用JS的函数(或箭头函数)创建的组件叫做函数组件

  • 为了与普通函数做区分,react对函数组件做了如下约定:

① 函数名字为大写字母开头

② 组件必须有返回值,表示该组件的结构 返回值一般是JXL结构 如果返回值为null,表示不渲染任何内容

  • 使用步骤

① 定义函数(函数名称首字母大写)

② 渲染函数组件

 用函数名作为组件的标签名称(首字母还是大写)

 组件标签可以是单标签,也可以是双标签

使用普通函数创建组件

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//定义函数组件
function Hello(){
    return (<div>这是一个函数组件</div>)
}
 
// 渲染组件
ReactDOM.render(<Hello/>, document.getElementById("root"));

预览

image.png

使用箭头函数创建组件

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
 
//箭头函数组件
const Hello = ()=> <div>这是一个箭头函数组件</div>
 
 
// 渲染组件
ReactDOM.render(<Hello/>, document.getElementById("root"));

预览

image.png

2 使用类创建组件

  • 使用es6的class创建的组件叫做类组件
  • 为了与普通的class区分,有如下的约定:

① 类名称以大写字母开头

② 类组件继承React.Component, 从而可以使用父类的属性和方法

③ 类组件必须有render方法,且render方法必须有返回值

返回值表示该组件的结构  

如果不渲染内容,就返回null

  • 使用步骤

    ① 创建组件

    ② 渲染组件

代码如下

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//1 创建类组件
class Hello extends React.Component{
    render(){
        return (<div>这是一个类组件</div>)
    }
 
}
 
// 2 渲染组件
ReactDOM.render(<Hello/>, document.getElementById("root"));

预览

image.png

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

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

  • 步骤

1 创建单独的js文件

  导入React               
  创建组件(形式不限)       
  导出该组件

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

创建的单独的js文件Hello.js

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

index.js

//导入react
import React from "react";
import ReactDOM from "react-dom";
 
//导入组件
import Hi from "./Hello"
 
// 渲染组件
ReactDOM.render(<Hi/>, document.getElementById("root"));

备注: 导入的文件在import关键字之后起名字,渲染时用起的名字作为标签即可

预览

image.png

avatar
文章
阅读
粉丝