React 基礎:useEffect 與 Hooks


初探 useEffect

render 完以後,瀏覽器 paint 之後你想要做什麼?

  • 每一次 render 之後,都去執行 useEffect 內的 function
useEffect(() => {
    console.log("alert render")
})
  • 在某些 state 改變的時候,去執行 useEffect 內的 function
    在 function 裡面加入第二個參數之後,當 todos 改變的時候,才去執行這個 useEffect
function writeTodoToLocalStorage(todos) {
    window.localStorage.setItem("todos", JSON.stringify(todos));
}

useEffect(() => {
    writeTodoToLocalStorage(todos)
}, [todos]);
// 加入第二個參數之後,當 todos 改變的時候,才去執行這個 useEffect
  • 第二個參數,當裡面是空的時候(表示不會變),表示只有在第一次 render 完之後,才會執行這個 useEffect,第二次、第三次都不會
    (注意:若是有初始值,在瀏覽器畫完畫面之後,才會去執行 useEffect,這樣會造成畫面會「閃一下」)
function writeTodoToLocalStorage(todos) {
    window.localStorage.setItem("todos", JSON.stringify(todos));
}

useEffect(() => {
    const todoData = window.localStorage.getItem('todos') || ""
    if (todoDate) {
        setTodos(JSON.parse(todoData));
    }
}, []);

什麼是 useLayoutEffect

render 完之後,瀏覽器 paint 「之前」你想做什麼?

  • 改善畫面會「閃一下」的狀況
useLayoutEffect(() => {
    const todoData = window.localStorage.getItem('todos') || ""
    if (todoDate) {
        setTodos(JSON.parse(todoData));
    }
}, []);
  • React Hook Flow Diagram

圖片來源

  • Run lazy initializers
    在 useState 後面放 function(即是 lazy initializers)
    function return 的東西會變成我們的初始值
const [todos, setTodos] = useState(() => {
    console.log("init");
    let todoData = window.localStorage.getItem("todos") || "";
    if (todoData) {
        todoData = JSON.parse(todoData);
        id.current = todoData[0].id + 1;
    } else {
        todoData = []
    }
})

再進一步了解 useEffect

  • Cleanup LayoutEffect
    在 useEffect 被清掉之前,想要做什麼事情?
useEffect(() => {
    const todoData = window.localStorage.getItem('todos')

    // clean up function
    return () => {
    }
}, [todos]);
第一次 render
第一次的 App()
todos: [{"id":1, "content":"123"}]

useEffect(() => {
    const todoData = window.localStorage.getItem('todos')


    return () => {
        // clean up function
    }
}, [todos]);

---

第二次 render,App()
todos: todos [{"id":1, "content":"123", "isDone":true}]
清掉 effect,再執行一次 useEffect
  • Unmount
    在 component 消失前,要做什麼事。
useEffect(() => {
    return () => {
        consoloe.log('unmount')
    }    
}, []);

寫一個自己的 hook!

抽出邏輯來共用,UI隨不同畫面而變化。
@ useInput.js

import { useState } from 'react';

export default function useInput() {
    const [value, setValue] = useSate("");
    const handleChange = e => {
        setValue(e.targetValue)
    }

    return {
        value,
        setValue,
        handleChange,
    };
}

@ App.js

import unsInput from './useInput'

const { value, setValue, handleChange } = useInput()
const { todos, setTodos } = useTodos()

function App() {
    return (
        <input 
            type="text"
            placeholder="todo"
            value={value}
            onChange={handleChange}  
        />
    )
}







Related Posts

Day02 - 安裝 Packages 和 Libraries

Day02 - 安裝 Packages 和 Libraries

[week11] - 關於資安

[week11] - 關於資安

用 Python 自學資料科學與機器學習入門實戰:Matplotlib 基礎入門

用 Python 自學資料科學與機器學習入門實戰:Matplotlib 基礎入門




Sponsored



Comments