跳至主要内容

React useEffect

JavaScript async 基本

async 的目的，是為了讓你可以在函式內 以同步的寫法處理非同步(平行執行)流程
useEffect 的功用在，將 js 回傳的 Promise 轉成 JSX 供 React 使用。

React 中使用 async 語法時，因為 await 回傳的是 Promise，而非 JSX。
但是 React Component 必須回傳 JSX，於是 React 便以 useEffect Hook 來封裝與管理回傳的 Promise 並適當地轉換成 JSX。

React 中使用 async 情境

下方範例 回傳的會是以 Promise 封裝的內容。因部分動作被 React 封裝 (語法糖) 所以沒看到 Promise 字眼。

處理 API Request。等待遠端伺服器回應時使用。

    async function fetchData() {
      const res = await fetch("/api/data")
      const data = await res.json()
      setData(data)
    }

事件處理器中使用非同步，等待實際平行動作結束後才往後走。

    function Button() {
      const handleClick = async () => {
        await saveData()
        alert("儲存完成")
      }
    
      return <button onClick={handleClick}>Save</button>
    }

搭配 try catch 處理錯誤，以同步語法方式處理非同步錯誤，以方便閱讀

    async function loadUser() {
      try {
        const res = await fetch("/api/user")
        const user = await res.json()
        setUser(user)
      } catch (err) {
        setError(err)
      }
    }

React 中的 UI Component

簡單說: useEffect 幫忙將 Promise 轉成 JSX。
React 在實作 Component 時也常以 function 作為結構定義。而此時 js function 回傳的必須是 JSX。
當 Component 的 state 須由其他 API Server 取得時，則不可直接在 function 前加上 async，因為 UI Component 回傳的必須是 JSX 而不是 Promise。
React 提供 useEffect Hook 來處理非同步動作行為。
React 架構下將 async 動作傳給 useEffect，由 React 來管理異步操作。
useEffect 將所得的資料傳給 state 供後續渲染使用
useEffect 使用概念範例

    function MyComponent() {
      useEffect(() => {
        async function fetchData() {
          const res = await fetch(...)
          setData(res)
        }
        fetchData()
      }, [])
    }

React 中使用 async 情境
React 中的 UI Component