发布时间:2023-11-11 15:00
目录
一 react组件介绍
二 创建组件的两种方式
2.1 使用函数创建组件
2.2 使用类创建组件
三 把组件抽离为独立的JS文件
组件是react的一等公民,使用react就是在使用组件
组件表示页面中的部分功能
组合多个组件就可以实现完整的页面功能
特点:可复用、独立、可组合
函数组件:使用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
import React from "react";
import ReactDOM from "react-dom";
//箭头函数组件
const Hello = ()=> 这是一个箭头函数组件
// 渲染组件
ReactDOM.render( , document.getElementById("root"));
效果
类组件:使用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"));
效果
一般把组件放到一个单独的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"));
效果