react生命周期(類組件/函數組件)操作代碼

Posted on by

1.react代碼模式分為兩種 類組件和函數組件（生命周期也有所不同）

2.類組件（寫法如下）

import React from 'react'
export default class App1 extends React.Component{
    state = {
        username:'',
        password:''
    }
    setUser = (event) => {
        this.setState({username:event.target.value})
    }
    setPass = (event) => {
        this.setState({password:event.target.value})
    }
    Submit = () => {
        console.log(this.state.username , this.state.password)
    }
    render(){
        return(
            <>
              <input type="text" value={this.state.username} onChange={this.setUser}/>
              <input type="text" value={this.state.paddword} onChange={this.setPass}/>
              <button onClick={this.Submit}>登錄</button>
            </>
        )
    }
}

3.函數組件

import { useState ,useEffect} from "react"
function App1 (){
    const [username ,setUsername] = useState('')
    const [password ,setPassword] = useState('')
    const setChange = event => {
        setUsername(event.target.value);
      };
      const setChangePassWold = event => {
        setPassword(event.target.value);
      };
      const Submit = () =>{
          console.log(username,password)
      }
    return(
        <>
         <input value={username} onChange={setChange}></input>
         <input value={password} onChange={setChangePassWold}></input>
         <button onClick={Submit}>登錄</button>
        </>
    )
}
export default  App1

以上是兩種模式的寫法展示

4.類組件和函數組件的區別：

  • 類組件：state定義狀態變量，有繼承，而且是oop模式（面向對象編程）
  • 類組件缺點：復用性不如函數組件，比較難拆分
  • 函數組件：根基是FP（函數式編程）, 沒有this指向，使用一些列Hooks實現對應的功能
  • 函數式組件缺點：不具備處理錯誤的邊界等業務情況的Hooks

5.生命周期

  A.類組件生命周期（三個階段：掛載階段，更新階段，卸載階段）

掛載階段執行順序 

1.constructor

2.componentWillMount

3.render

4.componentDidMount

更新階段執行順序

1.shouldComponentUpdate

2.componentWillUpdate

3.render

4.componentDidUpdate

銷毀階段

componentWillUnmount

實際操作如下

import React  from "react";
import {Link} from 'react-router-dom'
class Demo extends React.Component{
  
    constructor(props){
        super(props)
        console.log("constructor")
    }
    state = {
        num:1
    }
    UNSAFE_componentWillMount(){
        console.log("componentWillMount")
    }
    componentDidMount(){
        console.log("componentDidMount")
    }
    shouldComponentUpdate(){
      console.log('shouldComponentUpdate')
      return true
    }
    UNSAFE_omponentWillUpdate(){
        console.log("componentWillUpdate")
    }
    componentDidUpdate(){
        console.log("componentDidUpdate")
    }
    componentWillUnmount(){
        console.log("componentWillUnmount")
    }
    Submit = () =>  {
        this.setState({num:this.state.num+=1})
    }
    render(){
        console.log('render')
        return(
            <>
              <Link to='/app1'>App1</Link>
              //這裡替換成自己的即可
              <h3>{this.state.num}</h3>
              <button onClick={this.Submit}>改變</button>
            </>
        )
    }
}
export default Demo

更新階段

 B.函數組件生命周期，函數組件本質沒有生命周期，但是我們通過Hooks來模仿類組件當中的生命周期（也是三個階段）

import { useState ,useEffect} from "react"
import {Link} from 'react-router-dom'
function App1 (){
    const [username ,setUsername] = useState('')
    const [password ,setPassword] = useState('')
    const setChange = event => {
        setUsername(event.target.value);
      };
      const setChangePassWold = event => {
        setPassword(event.target.value);
      };
      const Submit = () =>{
        setUsername('')
          console.log(username,password)
      }
        // useEffect  =  vue mounted 區別是隻要視圖更新就變化 感覺類似watch 但是他又是初始化的 時候第一個
        //  useEffect(()=>{},[])
        useEffect(()=>{
          console.log('模擬componentDidMount第一次渲染')
            return () =>{
                console.log('模擬componentWillUnmount執行銷毀後')
            }
        },[password])
    return(
        <>
          <Link to='/home1'>home1</Link>
            //這裡需要修改成自己的路徑
          <input value={username} onChange={setChange}></input>
          <input value={password} onChange={setChangePassWold}></input>
          <button onClick={Submit}>登錄</button>
        </>
    )
}
export default  App1

//useEffect是react給我們的Hooks 我們可以使用它來模擬正常的生命周期流程

 useEffect(()=>{},[]) 是他的格式 ，第二個參數是需要監聽誰的變化就寫誰，也可以不寫

到此這篇關於react生命周期（類組件/函數組件）的文章就介紹到這瞭,更多相關react生命周期內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：