完全摸清react的useEffect

无需清除的Effect的情况

先看设定代码需求：使用useEffect实现标题的更新
用以前的class怎样实现

以前的方法在生命周期函数里面的组件加载和更新都需要执行一下

而用了Effect Hook之后如下 更方便

import React,{useState,useEffect} from 'react'

const LikeBUtton:React.FC = () =>{
    const [like,setLike] = useState(0)
 

    useEffect(()=>{
        document.title = `点击了${like}次`
    })
    return (
        <>
            <button onClick = {()=>{setLike(like+1)}}>
                {like}
            </button>
        </>
    )

}


export default LikeBUtton

需要清除的Effect（副作用）的情况

实现 点击 重新显示鼠标的位置的组件代码如下

import React,{useState,useEffect} from 'react'

const MouseTrack :React.FC = () =>{
    const [position,setPosition] = useState({x:0,y:0})
    useEffect(()=>{
        const updateMouse = (e:MouseEvent)=>{
            console.log('inner');
            setPosition({x:e.clientX,y:e.clientY})
        }
        document.addEventListener('click', updateMouse)
        return ()=>(
            // 清楚前面的click事件的Effect
            // console.log(1)
            document.removeEventListener('click', updateMouse)
            
        )

    },[])
    console.log("before render",position.x);
    
    return (
        <p>X:{position.x},y:{position.y}</p>
    )
}

export default MouseTrack

如果没有加

        return ()=>(
            // 清楚前面的click事件的Effect
            // console.log(1)
            document.removeEventListener('click', updateMouse)
            
        )

这些代码 ，那么 console.log(‘inner’);会被调用非常多次，每次更新都会调用回调函数里面的click事件，没有清楚副作用，所以上面代码就是清楚副作用的方式

控制Effect的执行

只在挂载和销毁的时候执行一次

在useEffect的第二个参数，加上空数组的符号

监测特定值改变时执行useEffect

在空数组里面写入监测值就可以了

监测组件所有值的改变然后执行useEffect

useEffect只写回调函数，右边不要加参数