快捷導航

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

更新時間：2023年01月06日 16:10:51 作者：南玖i

react代碼模式分為兩種類組件和函數(shù)組件(生命周期也有所不同),這篇文章主要介紹了react生命周期(類組件/函數(shù)組件),需要的朋友可以參考下

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

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.函數(shù)組件

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.類組件和函數(shù)組件的區(qū)別：

類組件：state定義狀態(tài)變量，有繼承，而且是oop模式（面向?qū)ο缶幊蹋?/li>
類組件缺點：復用性不如函數(shù)組件，比較難拆分
函數(shù)組件：根基是FP（函數(shù)式編程）, 沒有this指向，使用一些列Hooks實現(xiàn)對應的功能
函數(shù)式組件缺點：不具備處理錯誤的邊界等業(yè)務(wù)情況的Hooks

5.生命周期

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

掛載階段執(zhí)行順序

1.constructor

2.componentWillMount

3.render

4.componentDidMount

更新階段執(zhí)行順序

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.函數(shù)組件生命周期，函數(shù)組件本質(zhì)沒有生命周期，但是我們通過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 區(qū)別是只要視圖更新就變化 感覺類似watch 但是他又是初始化的 時候第一個
        //  useEffect(()=>{},[])
        useEffect(()=>{
          console.log('模擬componentDidMount第一次渲染')
            return () =>{
                console.log('模擬componentWillUnmount執(zhí)行銷毀后')
            }
        },[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(()=>{},[]) 是他的格式，第二個參數(shù)是需要監(jiān)聽誰的變化就寫誰，也可以不寫