語法重點複習 (一)

用於每次 render 後要執行的對應處理

import { useEffect } from 'react'

function MyComponent() {
  // Use useEffect hook:
  useEffect(() => {
    // Run something after every render.
  }) // <= Omit the dependencies argument.
}

用於只有初始化 render 後要執行的對應處理

import { useEffect } from 'react';
function MyComponent() {
  useEffect(() => {
    // Runs ONCE after initial rendering
  }, []);
}

用於當變數更新時，執行對應處理

import { useEffect, useState } from 'react';
function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

綜合運用：向後端呼叫 API

在這邊我們使用 JSONPlaceholder 提供的 FAKE API 做範例說明

• 列出所有的文章

fetch('https://jsonplaceholder.typicode.com/posts')
  .then((response) => response.json())
  .then((json) => console.log(json));

• 列出單一的文章

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then((response) => response.json())
  .then((json) => console.log(json));

使用useEffect的初始化Render，列出所有的文章

https://codepen.io/lala-lee-jobs/pen/GRdoNPe

使用useEffect的變數依賴更新，當點擊某篇文章時，列出單一的文章

https://codepen.io/lala-lee-jobs/pen/gOzPgbV

綜合運用：使用外部函式庫

可避免React渲染方式和外部函式庫運作有衝突。

import {helperLibrary} from './HelperLibrary';

function App() {
    const [data, setData] = useState(null);

    useEffect = (() => {
        helperLibrary.doSomething();
    }, []);
    // ...
}

綜合運用：在 Render 後才需要以 JS 動態操作DOM、動畫

https://codepen.io/lala-lee-jobs/pen/dyeMYOQ

語法重點複習 (二)

用於當需要在元件移除前，執行 cleanup 功能

import { useEffect, useState } from 'react';
function MyComponent({ someProp }) {
    const [someState, setSomeState] = useState('');
    const dependcyList = [someProp, someState];
    useEffect(() => {
      // Side-effect...
      return function cleanup() {
        // Side-effect cleanup...
      };
    }, [...dependcyList]);
    // 如果第二個參數沒有指定 (undefined) 
    // 則表示每次 render 都會執行 cleanup
}

綜合運用：addEventListenser/removeEventListenser

顯示畫面上按下的鍵盤文字 (這裡沒有指定 dependcyList，每次 render 都會執行 cleanup)

https://codepen.io/lala-lee-jobs/pen/QWrypeo

綜合運用：setInterval/clearInterval or setTimeout/clearTimeout

以秒計數，使用按鈕開始及暫停

(dependcyList 是 start，當 start 變更，render 後先做 cleanup，才做 effect function)

https://codepen.io/lala-lee-jobs/pen/GRdomZG

綜合運用: 外部函式庫的 subscribe/unsubscribe

上面的以秒計數範例，使用 RxJS 的 interval 來做看看

https://codepen.io/lala-lee-jobs/pen/yLjebqO

Next

透過實例，讓我們更清楚 useEffect 的使用情境，接下來會介紹 useEffect Tips，在未來的程式開發上靈活的使用 useEffect，會使用得專案程式易於開發及維護。

Reference

https://dmitripavlutin.com/react-useeffect-explanation/

https://codesandbox.io/embed/kw2b1?codemirror=1

https://medium.com/@intheblackworld/%E5%89%8D%E7%AB%AF%E6%94%BB%E5%9F%8E%E8%A9%A9-%E5%BE%9E%E8%A8%88%E6%95%B8%E5%99%A8%E9%96%8B%E5%A7%8B%E7%9A%84react-hook-%E4%BA%BA%E7%94%9F-7c01a074751e