# 使用 useEffect 創建生命週期
###### tags: `Hooks` `React` `LifeCycle`

> class component 擁有自己的生命週期，而 functional component 沒有 <br />
> React 16.8 新增了 Hooks 功能，讓 functional Components 能夠依賴這些 Hooks 擁有自己的狀態(useState) 及生命週期(useEffect)

:::info
**生命週期有主要三個階段:**
- `componentDidMount` 創建
- `componentDidUpdate` 更新
- `componentWillUnmount` 銷毀
:::

#### 而這三個階段可以可以使用 `useEffect` 在 functional component 內來達成!!

以下範例：

const Todo = props => {
    // 設置 state
    const [title, setTitle] = useState('default')

    // 更新 state
    const changeTitle = e => setTitle(e.target.value)

    // 設置 lifecycle
    useEffect(()=>{
    
        // componentDidMount 及 componentDidUpdate
        console.log(`更新後的 State ${title}`)

        // componentDidUpdate 及 componentWillUnmount
        return(()=>{
            console.log(`更新前的 State ${title}`)
        })
    })

    return (
        <input value={title} onChange={changeTitle} />
    )
}

<br />

### 範例是如何執行運作的？
#### [Step.1]
元件執行完 `render` 後會先執行一次 `useEffect` ，印出 `更新後的 State default`

#### [Step.2]
當元件更新時 `useEffect` 會先執行 `return` 中的內容在執行一次 `useEffect` 中的內容
印出`更新前的 State default` 再印出 `更新後的 State default test`
**等於執行了兩次！**

<br />

## useEffect 第二個參數 array，用於控制執行時機
#### 只執行一次 如同 `componentDidMount`

useEffect(() => {
 // 只在初次 render 時執行
  console.log('once')
}, [])

#### 執行第一次以及指定的值更新時執行 如同 `componentDidUpdate`

useEffect(() => {
 // 會在初次 render 時執行，並且當 array 內的 state 或 props 改變時也會執行
  console.log('have change')
}, [state, props])

#### 每次 render 都會執行

useEffect(() => {
 // 他會在第一次及每次 render 都會執行
  console.log('after every render')
})

:::info
**提示**
與 componentDidMount 或 componentDidUpdate 不同，使用 useEffect 執行的 effect 不會阻止瀏覽器更新畫面，大多數 effect 不需要同步發生，這使得應用程式感覺起來反應更快。

在少見的需要同步發生的情況下（例如測量 layout），有另外一個 useLayoutEffect Hook，它的 API 與 useEffect 相同。
:::