日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中的useEffect?useLayoutEffect到底怎么用_React

作者：碰磕 ? 更新時間： 2023-04-08 編程語言

前言

使用緣由：

在函數中當請求數據時并且給state賦值會導致整個函數刷新，

從而導致死循環的進行數據請求， 所以這時候可以用到useEffect

介紹

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

使用

空依賴

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)
        })
    },[])//參數1是函數，參數2是數組
    return (
        <div>
            {
            list.map(item=>
                <li key={item.id}>{item.name}</li>    
            )
            }
            
        </div>
    );
}
export default Test2;

傳空數組表示無依賴，只執行一次

非空依賴

數組傳依賴，當該依賴更新后也會進行執行(可以想象成class類的更新)

下方案例代表第一次執行,name被更新后也會進行執行

/**
 * 傳非空數組
 */
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])//參數1是函數，參數2是數組
    return (
        <div>
            {name}
            <button onClick={()=>{setname("study")}}>修改</button>
        </div>
    );
}
export default Test3;

實現銷毀操作

通過return函數執行銷毀后的行為

/**
 * 模擬銷毀
 */
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
                    })
                }}>點我</button>
                {this.state.iscreated && <Children />}
            </div>
        )
    }
}
export default Test4;

兩者區別

  • 調用時機不同,useLayoutEffect和原來的componentDidMount&componentDidUpdate一致,在react完成DOM更新后馬上同步調用，這樣會阻塞頁面渲染，而useEffect是會在整個頁面渲染完成才會調用所以推薦使用useEffect
  • 如果操作DOM的代碼推薦放在useLayoutEffect中

原文鏈接：https://blog.csdn.net/m_xiaozhilei/article/details/125251573

欄目分類
最近更新