React hook

了解 useEffect React Hook 的用途以及如何使用它！ 如果你對 React Hook 還不熟悉，可以先閱讀我的React Hook 簡介。 在 React 中，我常常使用的一個 Hook 是 useEffect。 import React, { useEffect } from 'react' useEffect 函數會在元件首次渲染以及每次更新後執行。 React 首先會更新 DOM，然後呼叫傳給 useEffect() 的函數。 舉個例子： const { useEffect, useState } = React const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState('Flavio') useEffect(() => { console.log(`Hi ${name} you clicked ${count} times`) }) return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === 'Flavio' ?...

了解 useContext React hook 的用途，以及如何使用它！ 如果您對 React hooks 還不熟悉，請先查看我的React hooks 簡介。 在 React 中，我有時會使用一個叫做 useContext 的 hook。 import React, { useContext } from 'react' 這個 hook 與 React Context API 搭配使用。 特別是，這個 hook 允許我們獲取當前的 context 值： const value = useContext(MyContext) 這個值是指最接近的 <MyContext.Provider> 組件。 調用 useContext 還會確保在 context 值發生變化時重新渲染組件。 我建議您閱讀我的Context API 教程以更深入地了解它。

了解useMemo React hook的用途，以及如何使用它！ 如果你對React Hooks還不太熟悉，請先看看我的React Hooks介紹。 有時我會使用一個React Hook叫做useMemo。 import React, { useMemo } from 'react' 這個hook用於創建一個儲存的值。 這個hook和useCallback非常相似，不同之處在於useCallback返回一個經過儲存的回調函數，而useMemo返回一個儲存的值，即該函數調用的結果。用例也不同，useCallback用於傳遞給子組件的回調函數。 有時候，你需要計算一個值，可能是通過複雜的計算或者是從數據庫中進行昂貴的查詢或者通過網絡獲取。 使用這個hook，這個操作只會執行一次，然後該值將被存儲在儲存的值中，下次你想要引用它時，你將能夠更快地獲取它。 以下是使用方法： const memoizedValue = useMemo(() => expensiveOperation()) 請確保在useMemo()的第二個參數中添加一個空數組，否則將不會進行任何儲存操作。 如果你需要傳遞參數，你還需要將它們作為數組傳遞： const memoizedValue = useMemo(() => expensiveOperation(param1, param2), [param1, param2]) 如果其中一個參數在你訪問該值時發生變化，該值將被重新計算而無法使用儲存。