react组件介绍、创建组件

目录

一 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 (<div>这是一个函数组件</div>)
}

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

效果

使用箭头函数创建组件

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


//箭头函数组件
const Hello = ()=> <div>这是一个箭头函数组件</div>


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

效果

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 (<div>这是一个类组件</div>)
    }

}

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

效果

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

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

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

创建的Hello.js

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

// 创建组件(可以是函数组件,也可以是类组件)
class Hello extends React.Component{
    render(){
        return (<div>这是一个独立的组件</div>)
    }

}
//导出该组件
export default Hello

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

index.js

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

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

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

效果