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.msg
    return <>
      <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.msg
    return <>
      <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