React：Cleanup Lifecycle & useEffect()

Class

componentWillUnmount(){ console.log('[Person.js] unmount'); }

funtional

return+【】——在unmount的时候调用

useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... setTimeout(()=>{ alert('Saved data to cloud!'); },1000) return ()=>{ console.log('[Cock.js] cleanup wordk in useEffect'); } },[]); //传入作用与的对象——persons改变，调用effect //空array则只run开始那一次

return（无第二个参数）——在每一次render后调用 return的内容在函数前出现；

useEffect(()=>{ console.log('[Cock.js] 2nd useEffect'); return ()=>{ console.log('[Cock.js] cleanup wordk in 2nd useEffect'); } });

在return中设置umount内容

在timeout之前隐藏cockpit，即调用return（unmount），便不会弹出alert

const Cockpit =(props)=>{ useEffect(()=>{ //每次update都会被调用 console.log('[Cockpit.js] useeffect'); //Http request... const timer=setTimeout(()=>{ alert('Saved data to cloud!'); },1000) return ()=>{ console.log('[Cock.js] cleanup wordk in useEffect'); clearTimeout(timer); } },[]);