四、useEffect解绑副作用

useEffect解绑副作用

我们先看一段代码

function App(){
    const [ count , setCount ] = useState(0);

    useEffect(()=>{
        console.log(`useEffect=>你点击了${count} 次`)
        return ()=>{
            console.log('====================')
        }
    },[count])

    return (
        <div>
            <p>你点击了{count} 次</p>
            <button onClick={()=>{setCount(count+1)}}>点击</button>
        </div>
    )
}

export default App

我们发现，我们在useEffect内部里通过返回了一个函数,该函数为解绑方法，然后在为Effect添加了第二个参数，它是一个数组，数组可以写入很多状态对应的变量，意思是当状态值发生改变时，我们才进行解绑。但是当传入空数组[ ]时，就是当组件将被销毁时才进行解绑（比如一些路由跳转相关的操作）。
我们在这个案列传入count值，意思是每次count发生改变，我们都进行解绑。
这时候只要count状态发生变化，都会执行解绑副作用函数，浏览器的控制台也就打印出了一串=================。