React中的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;

/**
 * 传非空数组
 */
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;

/**
 * 模拟销毁
 */
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;