React学习（day8)

Class API

类组件基础结构

类组件通过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 ClassApi(){
  return (
    <>
      <Counter />
    </>
  )
}

export default ClassApi

类组件的生命周期函数

1.componentDidMount：组件挂载完毕自动执行 - 异步数据获取

2.componentWillUnmount：组件卸载时自动执行 - 清除副作用

...........

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>子组件</div>
  }
}

function PreLifeFunction(){
  const [show,setShow] = useState(true)

  return (
    <>
      {show && <Son />}
      <button onClick={()=>setShow(false)}> unmount </button>    
    </>
  )
}

export default PreLifeFunction

useEffect
 

1. 组件挂载时执行一次（类似 componentDidMount）

useEffect(() => {
  console.log("组件挂载");
}, []);

2. 依赖更新时重新执行（类似 componentDidUpdate）

useEffect(() => {
  console.log(`count 变成了 ${count}`);
}, [count]);

3. 组件卸载前清理（类似 componentWillUnmount）

useEffect(() => {
  const timer = setInterval(() => console.log("定时器"), 1000);

  return () => {
    clearInterval(timer); // 清除定时器
    console.log("组件卸载或依赖更新，清理副作用");
  };
}, []);

类组件的组件通讯

概念：类组件和Hooks编写的组件在组件通讯的思想上完全一致

1.父传子：通过prop绑定数据

2.子传父：通过prop绑定父组件的函数，子组件调用

3.兄弟通信：状态提升，通过父组件做桥接

import { Component } from "react";
//1.父传子 直接通过prop子组件标签身上绑定父组件中的数据即可
//2.子传父 在子组件标签身上绑定父组件中的函数，子组件中调用这个函数传递参数

//子组件
class Son extends Component{
  render(){
    return (
      <>
        <div>我是子组件 {this.props.msg}</div>
        <button onClick={()=>this.props.onGetSonMsg('我是son组件的消息')}>向父组件传递消息</button>
      </>
    )
  }
}

//父组件
class Parent extends Component{
  state = {
    msg: 'this is parent msg'
  }

  getSonMsg = (sonMsg)=>{
    console.log(sonMsg)
  }

  render (){
    return <div>我是父组件<Son msg={this.state.msg}  onGetSonMsg={this.getSonMsg}/></div>
  }
}

function PreCommunication(){
  return (
    <>
      <Parent />
    </>
  )
}

export default PreCommunication