目录
组件
对特定功能的封装,主要用来对UI进行拆分。
内容
结构 HTML
样式 CSS
逻辑 JS
特点
-
独立
-
可复用
-
可组合
分类
-
基础组件:指
input
、button
这种基础标签,以及antd封装过的通用UI组件 -
业务组件:由基础组件组合成的业务抽象化UI。例如: 包含了A公司所有部门信息的下拉框
-
区块组件:由基础组件组件和业务组件组合成的UI块
-
页面组件:展示给用户的最终页面,一般就是对应一个路由规则
React 组件的两种创建方式
-
使用 JS 中的
函数
创建组件 -
使用 JS 中的
class
创建组件
示例
import React from '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>, root)
// 使用 单标签 渲染组件:
<Hello />
ReactDOM.render(<Hello />, root)
类组件-用class创建组件
定义格式
使用 ES6 的 class 创建的组件,叫做类(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会在组件创建时执行一次
有状态组件和无状态组件
什么是状态
定义:是用来描述事物在
某一时刻的形态
的数据。一般称为state。
例如:9月23号时书的库存数量; 18岁时人的身高;
特点:
状态能被改变,改变了之后视图会有对应的变化
作用: 1. 保存数据 . 2. 为后续更新视图打下基础
区别:
有状态组件:能定义state的组件。类组件就是有状态组件。
无状态组件:不能定义state的组件。函数组件又叫做
无状态组件
注意:2019年02月06日,rect 16.8中引入了 React Hooks,从而函数式组件也能定义自己的状态了
无状态组件的应用场景
-
组件本身就不需要有状态。例如:渲染一段固定的内容
-
组件本身就没有状态,可以从外部传入
类组件的状态
定义状态
固定格式,使用 state = 对象
来做初始化
import React from "react";
export default class Hello extends React.Component {
// 这里的state就是状态
state = {
list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
isLoading: true
};
}
在视图中使用
render() {
return (
<>
<h1>歌单-{this.state.count}</h1>
<ul>
{this.state.list.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
<div>{this.state.isLoading ? "正在加载" : "加载完成"}</div>
</>
);
}
组件的状态-修改状态
setState
语法:
this.setState({ 要修改的部分数据 })
作用: 1. 修改 state 2. 更新 UI (界面)
示例
state = {
count: 0
};
this.setState({
count: this.state.count++
})
理解状态不可变
react核心理念之状态不可变
不要直接修改当前状态值,而是创建新的状态值。