【React Hook 03】useEffect

useEffect 的 Effect 意指「副作用」，
即是指 fetch 资料、订阅事件与改变 DOM，
这些在 render 期间无法完成，
却又会影响其他 component，
被称为是「side effect」的行为。

useEffect 是将
componentDidMount、
componentDidUpdate 与
componentWillUnmount
这三个主要的生命周期方法
整合起来的单一 API，
让 function component
可以藉由 useEffect 实现这些方法。

使用方式

useEffect 使用格式如下：
useEffect(callback, array?)

• calback：
  • 处理副作用的逻辑都在这里进行
  • 定义 componentDidMount 或 componentDidUpdate 要做什麽事，
  • 回传值也要是一个函式，表示 componentWillUnmount 要做什麽事，
• array：
  • 如果是空的，则只在 render 之後执行一次，无法再次触发
  • 如果有值，会在该 array 发生改变後执行
  • 如果省略，则每次渲染时都会执行

useEffect 清理机制

• 每次执行前都会清理上一次的 effect
• useEffect 中可以返回一个函式进行清理工作，如 setTimeOut 和 setInterval

useEffect 生命周期

对应 class component 的三个生命周期

• componentDidMount：元件已渲染／挂载（Mount）到 DOM 上
• componentDidUpdate：状态（state）更新完毕
• componentWillUnmount：元件准备从 DOM 移除「之前」

    const mounted=useRef();
    useEffect(()=>{
      if(mounted.current===false){
        mounted.current=true;
        /* 下面是 componentDidMount*/
    
    
        /* 上面是 componentDidMount */      
      }
      else{
        /* 下面是componentDidUpdate */
    
    
        /* 上面是componentDidUpdate */

      }
      
      return (()=>{
           /* 下面是 componentWillUnmount */
      
      
          /* 上面是 componentWillUnmount */
      })
    },[dependencies]); // 第二个参数用来限定当哪些变数被改变时要触发 useEffect，如果使用空阵列，表示只执行一次，没有任何改变可以再次触发

参考资料：

• 【React.js入门 - 20】 useEffect - 在function component用生命周期
• 认识 React Hooks 之一