React — Class類元件

萬事順意發表於2024-03-15
React元件

一、Class類元件基礎模板

import './App.css'; 
import {Component} from 'react'

class Counter extends Component{

  //編寫元件的邏輯程式碼
  //1.狀態變數 事件回撥 UI
  //2.定義狀態變數
  state = {
    count : 0
  }

  setCount = ()=>{
    this.setState({
      count : this.state.count +1
    })  
  }

  render(){
    const {count} = this.state
    return <>
    
        <div>
          <button>-</button>
          <span>
            {count}
          </span>
          <button onClick={this.setCount}>
            +
          </button>
        </div>
    </>
  }

}

function App() {
  return (
    <div className="App">
      <Counter></Counter>
    </div>
  );
}

export default App;

二、類元件生命週期函式

1.componentDidMount：元件掛載完畢自動執行 - 可以獲取非同步資料

2.componentWillUnmount ：元件鞋子時自動執行 - 清理副作用

import "./App.css";
import { Component, useState } from "react";

class Counter extends Component {
  //編寫元件的邏輯程式碼
  //1.狀態變數 事件回撥 UI
  //2.定義狀態變數
  state = {
    count: 0,
  };

  setCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };
  //生命週期函式
  //元件渲染完成自動執行 只會執行一次
  componentDidMount() {
    console.log("元件渲染完成");
  }
  //元件解除安裝的時候自動執行
  componentWillUnmount(){
    console.log("元件解除安裝完成");
  }

  render() {
    const { count } = this.state;

    return (
      <>
        <div>
          <button>-</button>
          <span>{count}</span>
          <button onClick={()=>this.setCount}>+</button>
        </div>
      </>
    );
  }
}

function App() {
  const [isShow,setShow] = useState(true)
  return (
    <div className="App">
      <button onClick={()=>setShow(!isShow)}>
        change
      </button>
      {isShow&&<Counter></Counter>}
    </div>
  );
}

export default App;

三、類元件的元件通訊

1.父傳子：透過prop繫結資料

class Son extends Component{
  render () {
    return <div>
      我是子元件
      <div>
        {/* 使用 this.props.屬性 */}
        {this.props.msg}
      </div>
    </div>
  }
}

class Father extends Component{

  state = {
    msg : 'this is father msg'
  }
  render () {
    return <div>
      我是父元件
      {/* 直接透過子標籤繫結身上的父元件的資料 */}
      <Son msg={this.state.msg}></Son>
    </div>
  }
}

2.子傳父：透過prop繫結父元件中的函式，子元件呼叫

class Father extends Component{

  state = {
    msg : 'this is father msg',
    sonMsg : ''
  }
  getSonMsg=(sonMsg)=>{
    console.log(sonMsg)
      this.setState({
        sonMsg : sonMsg
      })
  }
  render () {
    return <div>
      我是父元件
      {/* 子傳父：在子元件標籤上繫結父元件的函式，子元件呼叫這個函式並傳遞引數 */}
      <Son msg={this.state.msg} onGetSonMsg={this.getSonMsg}></Son>
      <div>
        {this.state.sonMsg}
      </div>
    </div>
  }
}
class Son extends Component{

  state = {
    myMsg : 'this is Son msg'
  }
  render () {
    return <div>
      我是子元件>

      <div>

        <button onClick={()=>{
          this.props.onGetSonMsg(this.state.myMsg)
        }}>send Father</button>

      </div>
    </div>
  }
}

3.兄弟通訊：狀態提升，透過父元件做橋接

相關文章