React 组件介绍
对特定功能的封装，主要用来对UI进行拆分。
内容
结构 HTML
样式 CSS
逻辑 JS
特点
-
独立
-
可复用
-
可组合
分类
-
基础组件：指
input、button这种基础标签，以及antd封装过的通用UI组件 -
业务组件：由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框
-
区块组件：由基础组件组件和业务组件组合成的UI块
-
页面组件：展示给用户的最终页面，一般就是对应一个路由规则
React 组件的两种创建方式
import ReactDOM from 'react-dom'
const title = <h1>react的两种组件</h1>
// 定义一个函数式组件
const Com1 = () => {
return <div>第一个函数式组件</div>
}
// 定义一个类组件
class Com2 extends React.Component {
render () {
return <div>第一个类组件</div>
}
}
const content = (
<div>
{title}
{<Com1 />}
<hr />
{<Com2 />}
</div>
)
ReactDOM.render(content, document.getElementById('root'))对比
-
类组件比较繁琐
-
函数式组件比较简便
目前市面上的项目中都有使用
函数式组件-使用函数创建组件
定义组件
使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件
-
约定1：函数名首字符大写
必须以大写字母开头**，React 据此区分
组件和普通的 HTML -
约定2：必须有返回值
表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
示例：
// 1. 使用普通函数创建组件：
function Hello() {
return <div>这是我的第一个函数组件!</div>
}
function Button() {
return <button>按钮</button>
}
// 2. 使用箭头函数创建组件：
const Hello = () => <div>这是我的第一个函数组件!</div>使用组件
使用组件就像使用 HTML 标签一样。用函数名称作为组件标签名称
// 使用 双标签 渲染组件：
<Hello></Hello>
ReactDOM.render(<Hello></Hello>, document.getElementById('root'))
// 使用 单标签 渲染组件：
<Hello />
ReactDOM.render(<Hello />, document.getElementById('root'))类组件-用class创建组件
格式
// import { Component } from 'react'
// class 类名 extends Component {
import React form 'react'
class 类名 extends React.Component {
// ...
render () {
return 本组件的UI结构
}
}注意:
-
类名必须以大写字母开头
-
extends是一个关键字，用来实现类之间的继承。类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性。
-
类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构。render会在组件创建时执行一次
示例
// 导入 React
import React from 'react'
class Hello extends React.Component {
render() {
return <div>Hello Class Component!</div>
}
}使用组件
// 导入 React
import React from 'react'
import ReactDom from 'react-dom'
// 1. 定义组件
class Hello extends React.Component {
render() {
return <div>Hello Class Component!</div>
}
}
const content = (<div><Hello/></div>)
ReactDOM.render(content, document.getElementById('root'))使用组件的方式与函数式组件一致：可以使用单标签和双标签
有状态组件和无状态组件
什么是状态
定义：是用来描述事物在某一时刻的形态的数据。一般称为state。例如：9月23号时书的库存数量； 18岁时人的身高；
特点：
-
状态能被改变，改变了之后视图会有对应的变化
作用：
-
保存数据。例如：要循环生成一份歌曲列表，那要提前准备好歌曲数据吧
-
为后续更新视图打下基础。如果用户点击了操作，让歌单的内容+1了，视图会自动更新（这是由react库决定的）
有状态组件和无状态组件
有状态组件：能定义state的组件。类组件就是有状态组件。
无状态组件：不能定义state的组件。函数组件又叫做无状态组件
注意：2019年02月06日，rect 16.8中引入了 React Hooks，从而函数式组件也能定义自己的状态了
无状态组件的应用场景
-
组件本身就不需要有状态。例如：渲染一段固定的内容
-
组件本身就没有状态，可以从外部传入
小结
-
状态：是用来描述事物在
某一时刻的形态的数据 -
状态的特点: 能被修改，改了之后对应的视图也能更新。
-
函数组件是组件，类组件是组件
类组件的状态
定义状态
1 使用 state = 对象 来做初始化
import React from "react";
export default class Hello extends React.Component {
// 这里的state就是状态
state = {
list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
isLoading: true
};
}2 使用constructor(){ super() this.state ={......} } 来做初始化
import React from "react";
export default class Hello extends React.Component {
// 这里的state就是状态
constructor () {
super()
this.state = {
name:'帅哥在这'
}
};
// 在视图中使用
render() {
return (
<>
<h1>{this.state.name}</h1>
</>
);
}
}