react 之 Class API-编程知识

react 之 Class API

class API就是编写类组件，虽然react官方不在推荐使用，但是一般公司里维护的老项目里还是有的，可以简单了解下

1.类组件的基础结构

类组件就是通过js里的类来组织组件的代码的

1️⃣通过类属性state定义状态数据
2️⃣通过setState方法来修改状态数据
3️⃣通过render来写UI模版（JSX语法一致）

// Class API
import { Component } from "react"
class Counter extends Component {// 编写组件的逻辑代码// 1. 状态变量  2. 事件回调  3.UI(JSX)// 1. 定义状态变量state = {count: 0}// 2. 定义事件回调修改状态数据setCount = () => {// 修改状态数据this.setState({count: this.state.count + 1})}render () {return <button onClick={this.setCount}>{this.state.count}</button>}
}
function App () {return (<><Counter /></>)
}export default App

2.类组件的生命周期函数

概念：组件从创建到销毁的各个阶段自动执行的函数就是生命周期函数
在这里插入图片描述
1.componentDidMount：组件挂载完毕自动执行 —— 异步数据获取（组件渲染完毕执行一次，发送网络请求）
2.componentWillUnmount：组件卸载时自动执行 —— 清理副作用（比如清楚定时器，清除事件绑定）

// Class API 生命周期import { Component, useState } from "react"class Son extends Component {// 声明周期函数// 组件渲染完毕执行一次  发送网络请求componentDidMount () {console.log('组件渲染完毕了，请求发送起来')// 开启定时器this.timer = setInterval(() => {console.log('定时器运行中')}, 1000)}// 组件卸载的时候自动执行  副作用清理的工作 清除定时器 清除事件绑定componentWillUnmount () {console.log('组件son被卸载了')// 清除定时器clearInterval(this.timer)}render () {return <div>i am Son</div>}
}function App () {const [show, setShow] = useState(true)return (<>{show && <Son />}<button onClick={() => setShow(false)}>unmount</button></>)
}export default App

3.类组件的组件通信

概念：类组件和hooks编写的组件在组件通信的思想上完全一致
1️⃣父传子：直接通过prop子组件标签身上绑定父组件中的数据

// Class API 父子通信
import { Component } from "react"
// 子组件
class Son extends Component {render () {// 使用this.props.msgreturn <><div>我是子组件 {this.props.msg}</div></>}
}// 父组件
class Parent extends Component {state = {msg: 'this is parent msg'}render () {return <div>我是父组件<Son msg={this.state.msg}/></div>}
}
function App () {return (<><Parent /></>)
}export default App

2️⃣子传父：在子组件标签身上绑定父组件中的函数，子组件中调用这个函数传递参数

// Class API 父子通信import { Component } from "react"
// 1. 父传子  直接通过prop子组件标签身上绑定父组件中的数据即可
// 2. 子传父  在子组件标签身上绑定父组件中的函数，子组件中调用这个函数传递参数// 总结
// 1. 思想保持一致
// 2. 类组件依赖于this// 子组件
class Son extends Component {render () {// 使用this.props.msgreturn <><button onClick={() => this.props.onGetSonMsg('我是son组件中的数据')}>sendMsgToParent</button></>}
}// 父组件
class Parent extends Component {getSonMsg = (sonMsg) => {console.log(sonMsg)}render () {return <div>我是父组件<Son onGetSonMsg={this.getSonMsg} /></div>}
}function App () {return (<><Parent /></>)
}export default App