React组件基础
了解 React 组件的两种创建方式
-
使用 JS 中的
函数创建组件 -
使用 JS 中的
class创建组件
函数组件:
// 定义一个函数式组件
const Com1 = () => {
return 第一个函数式组件
}类组件:
// 定义一个类组件
class Com2 extends React.Component {
render () {
return 第一个类组件
}
}是不是都挺眼熟
对比
-
类组件比较繁琐
-
函数式组件比较简便
目前市面上的项目中都有使用,下面来仔细说说
----------------------------------------------
函数式组件-使用函数创建组件
使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件
-
约定1：函数名首字符大写
必须以大写字母开头，React 据此区分
组件和普通的 HTML -
约定2：必须有返回值
// import { Component } from 'react' // class 类名 extends Component { import React form 'react' class 类名 extends React.Component { // ... render () { return 本组件的UI结构 } }表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
使用组件:
使用组件就像使用 HTML 标签一样。用函数名称作为组件标签名称
// 使用 双标签 渲染组件：
类组件-用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会在组件创建时执行一次
使用方式:
// 导入 React
import React from 'react'
import ReactDom from 'react-dom'
// 1. 定义组件
class Hello extends React.Component {
render() {
return Hello Class Component!
}
}
const content = (小结:
1. 组件名必须大写字母开头
2.类组件必须有rende方法并且返回结构,函数组件直接返回结构
3.使用方式一致: 双标签与单标签
---------------------------------------------------
有状态组件和无状态组件
有状态组件：能定义state的组件。类组件就是有状态组件。
无状态组件：不能定义state的组件。函数组件又叫做无状态组件
16.8之前 函数组件无状态,现在有了 React-Hooks 之后,函数组件也有了
定义状态:
1.类组件两种方式
(1) 直接state等于一个对象
(2) 用构造器指定状态
import React from "react";
export default class Hello extends React.Component {
// 1. state就是状态
state = {
list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
isLoading: true
};
// 2. 构造函数
constructor() {
this.state = {
list: [{ id: 1, name: "明天会更好" },{ id: 2, name: "难忘今宵" }],
isLoading: true
}
}
}在视图中使用
render() {
return (
<>
歌单-{this.state.count}
{this.state.list.map((item) => (
- {item.name}
))}
{this.state.isLoading ? "正在加载" : "加载完成"}
);
}2. 函数组件这里就不说啦, 不然篇幅太长了,有兴趣可以看看我另外一篇
useState 给函数组件提供状态
-----------------------------------------------------
事件绑定
格式:
<元素 事件名1={ 事件处理函数1 } 事件名2={ 事件处理函数2 } >const title = react中的事件
export default class Hello extends React.Component {
fn() {
console.log('mouseEnter事件')
}
render() {
return (
console.log('click事件')}
onMouseEnter={this.fn}
能处理鼠标进入或者点击事件
)
}
}
const content = (
{title}
{熟悉的感觉, 跟原生一样
注意：
-
事件名是小驼峰命名格式
-
在类中补充方法
-
this.fn不要加括号：
onClick={ this.fn() }这样会先调用fn()，然后将fn的执行结果当做click事件的处理函数
别忘记了写this
-----------------------------------------------------
事件对象
handleClick(e)=> {
e.preventDefault()
console.log('单击事件触发了', e)
}
render() {
return ()
}
}结果就不截图了,跟原生的一毛一样
-----------------------------------------------------
修改状态
语法：this.setState({ 要修改的部分数据 })
作用：
-
修改 state
-
更新 UI
示例:
这里点击一次 让a + 1, 会报错,
因为react核心理念是状态不可变,不能直接改变原来状态本身 而是 创建新的状态值去覆盖老的值。
改:
a: this.state.a + 1