React中的useEffect useLayoutEffect到底怎么用

更新時(shí)間：2023年02月06日 15:50:51 作者：碰磕

這篇文章主要介紹了React中的useEffect useLayoutEffect具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

前言

使用緣由：

在函數(shù)中當(dāng)請(qǐng)求數(shù)據(jù)時(shí)并且給state賦值會(huì)導(dǎo)致整個(gè)函數(shù)刷新，

從而導(dǎo)致死循環(huán)的進(jìn)行數(shù)據(jù)請(qǐng)求，所以這時(shí)候可以用到useEffect

介紹

useEffect(處理副作用)
useLayoutEffect(同步執(zhí)行副作用)

使用

空依賴

import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test2() {
    const [list,setlist] =useState([])
    useEffect(()=>{
        axios.get("./test.json").then(res=>{
            console.log(res.data)
            setlist(res.data)
        })
    },[])//參數(shù)1是函數(shù)，參數(shù)2是數(shù)組
    return (
        <div>
            {
            list.map(item=>
                <li key={item.id}>{item.name}</li>    
            )
            }
            
        </div>
    );
}
export default Test2;

傳空數(shù)組表示無(wú)依賴，只執(zhí)行一次

非空依賴

數(shù)組傳依賴，當(dāng)該依賴更新后也會(huì)進(jìn)行執(zhí)行(可以想象成class類的更新)

下方案例代表第一次執(zhí)行,name被更新后也會(huì)進(jìn)行執(zhí)行

/**
 * 傳非空數(shù)組
 */
import axios from 'axios';
import React,{useEffect, useState} from 'react';
function Test3() {
    const [name,setname] =useState("peng-ke")
    useEffect(()=>{
        setname(name.substring(0,1).toUpperCase()+name.substring(1))
    },[name])//參數(shù)1是函數(shù)，參數(shù)2是數(shù)組
    return (
        <div>
            {name}
            <button onClick={()=>{setname("study")}}>修改</button>
        </div>
    );
}
export default Test3;

實(shí)現(xiàn)銷毀操作

通過(guò)return函數(shù)執(zhí)行銷毀后的行為

/**
 * 模擬銷毀
 */
import React,{Component, useEffect, useState} from 'react';
function Children() {
    const [name,setname] =useState("peng-ke")
    useEffect(()=>{
        window.onresize=()=>{
            console.log("resize")
        }
        let timer=setInterval(() => {
            console.log("ppppp")
        }, 1000);
        return ()=>{
            console.log("銷毀");
            window.onresize=null;
            clearInterval(timer)
        }
    },[])
    return (
        <div>
            碰磕
        </div>
    );
}
class Test4 extends Component{
    state={
        iscreated:true
    }
    render(){
        return(
            <div>
                <button onClick={()=>{
                    this.setState({
                        iscreated:!this.state.iscreated
                    })
                }}>點(diǎn)我</button>
                {this.state.iscreated && <Children />}
            </div>
        )
    }
}
export default Test4;

兩者區(qū)別

調(diào)用時(shí)機(jī)不同,useLayoutEffect和原來(lái)的componentDidMount&componentDidUpdate一致,在react完成DOM更新后馬上同步調(diào)用，這樣會(huì)阻塞頁(yè)面渲染，而useEffect是會(huì)在整個(gè)頁(yè)面渲染完成才會(huì)調(diào)用所以推薦使用useEffect
如果操作DOM的代碼推薦放在useLayoutEffect中

到此這篇關(guān)于React中的useEffect useLayoutEffect到底怎么用的文章就介紹到這了,更多相關(guān)React useEffect useLayoutEffect內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: