欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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è)務情況的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)聽誰的變化就寫誰,也可以不寫

到此這篇關(guān)于react生命周期(類組件/函數(shù)組件)的文章就介紹到這了,更多相關(guān)react生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決React報錯`value` prop on `input` should not be null

    解決React報錯`value` prop on `input` should&

    這篇文章主要為大家介紹了React報錯`value` prop on `input` should not be null解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • 一文詳解React渲染優(yōu)化之useImmer

    一文詳解React渲染優(yōu)化之useImmer

    在React日常開發(fā)中,我們常常被重復渲染或無意義渲染所折磨,窮盡腦汁,做各種優(yōu)化:memo、useMemo、useCallback、immutable等,本文主要講述immutable的簡約版Immer,感興趣的同學可以一起來學習
    2023-05-05
  • 前端開發(fā)使用Ant Design項目評價

    前端開發(fā)使用Ant Design項目評價

    這篇文章主要為大家介紹了前端開發(fā)使用Ant Design項目評價,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • redux的原理、工作流程及其應用方式

    redux的原理、工作流程及其應用方式

    這篇文章主要介紹了redux的原理、工作流程及其應用方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • react+antd 遞歸實現(xiàn)樹狀目錄操作

    react+antd 遞歸實現(xiàn)樹狀目錄操作

    這篇文章主要介紹了react+antd 遞歸實現(xiàn)樹狀目錄操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • React項目中axios的封裝與API接口的管理詳解

    React項目中axios的封裝與API接口的管理詳解

    Axios是一個npm軟件包,允許應用程序?qū)TTP請求發(fā)送到Web API,下面這篇文章主要給大家介紹了關(guān)于React項目中axios的封裝與API接口的管理的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程

    這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團隊在復雜業(yè)務中的開發(fā)需求,需要的朋友可以參考下
    2022-07-07
  • 詳解React項目如何修改打包地址(編譯輸出文件地址)

    詳解React項目如何修改打包地址(編譯輸出文件地址)

    這篇文章主要介紹了詳解React項目如何修改打包地址(編譯輸出文件地址),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-03-03
  • react中使用useEffect及踩坑記錄

    react中使用useEffect及踩坑記錄

    這篇文章主要介紹了react中使用useEffect及踩坑記錄,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • React?中使用?react-i18next?國際化的過程(react-i18next?的基本用法)

    React?中使用?react-i18next?國際化的過程(react-i18next?的基本用法)

    i18next?是一款強大的國際化框架,react-i18next?是基于?i18next?適用于?React?的框架,本文介紹了?react-i18next?的基本用法,如果更特殊的需求,文章開頭的官方地址可以找到答案
    2023-01-01

最新評論