react 鈎子中的 useCallback 和 useMemo 有什么區別？

Question

你能告訴我嗎。 反應鈎子中的useCallback()和useMemo()有什么區別，什么時候使用該函數或示例是什么？

Answer 1

使用備忘錄：

當依賴數組的某些值發生變化時，用於記憶一個值的鈎子。

相反， useCallback 會記住一個函數，一個回調，因此當組件重新渲染時，您不必重新計算整個函數。

UseMemo 示例使用：

例如，您要計算購物車付款的總額。 我會記住該總值，並且僅在稅收百分比也發生變化時才更改它。

const total = useMemo(() => taxes + subtotal, [taxes]);

UseCallBack 示例使用：

我想對 API 或 DB 執行各種調用以搜索某些值（例如，在搜索欄上），但我不希望組件在每次呈現時都重新計算函數，所以我記住了函數：

const getCharacters = useCallback(() => {
      if(input.trim() !== ""){
        const value = input.toLocaleLowerCase()
        const chars = Characters.filter((character)  => {
          return character.name.toLowerCase().includes(value)}
        )
        setCharacters(chars)
      }else {
        setCharacters([])
      }
  }, [input]);

通常，當還需要一個 useEffect 鈎子時，使用 useCallback 來在某些依賴項發生變化時掛載一個元素：

useEffect(() => {
   getCharacters()
  }, [input, getCharacters]);