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

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

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

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

2.類(lèi)組件（寫(xiě)法如下）

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

以上是兩種模式的寫(xiě)法展示

4.類(lèi)組件和函數(shù)組件的區(qū)別：

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

5.生命周期

A.類(lèi)組件生命周期（三個(gè)階段：掛載階段，更新階段，卸載階段）

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

1.constructor

2.componentWillMount

3.render

4.componentDidMount

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

1.shouldComponentUpdate

2.componentWillUpdate

3.render

4.componentDidUpdate

銷(xiāo)毀階段

componentWillUnmount

實(shí)際操作如下

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ì)沒(méi)有生命周期，但是我們通過(guò)Hooks來(lái)模仿類(lèi)組件當(dāng)中的生命周期（也是三個(gè)階段）

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ū)別是只要視圖更新就變化 感覺(jué)類(lèi)似watch 但是他又是初始化的 時(shí)候第一個(gè)
        //  useEffect(()=>{},[])
        useEffect(()=>{
          console.log('模擬componentDidMount第一次渲染')
            return () =>{
                console.log('模擬componentWillUnmount執(zhí)行銷(xiāo)毀后')
            }
        },[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 我們可以使用它來(lái)模擬正常的生命周期流程

useEffect(()=>{},[]) 是他的格式，第二個(gè)參數(shù)是需要監(jiān)聽(tīng)誰(shuí)的變化就寫(xiě)誰(shuí)，也可以不寫(xiě)