React中的useEffect useLayoutEffect到底怎么用

目录

• 前言
• 介绍
• 使用
• 空依赖
• 非空依赖
• 实现销毁操作
• 两者区别

前言

使用缘由：

在函数中当请求数据时并且给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中