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);
    }
  },[]);