反应钩子中的 useCallback 和 useMemo 有什么区别？

Question

你能告诉我吗？ React hooks 中的 useCallback() 和 useMemo() 有什么区别，什么时候使用函数或者例子是什么？

Answer 1

useMemo 和 useCallback 使用记忆。

我喜欢将记忆视为记住某事。

虽然 useMemo 和 useCallback 记住呈现之间的某些东西，直到依赖项发生变化，区别就在于它们记住。

useMemo 将记住函数的返回值。

useCallback 会记住您的实际功能。

一行

useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

Answer 2

useMemo:

当依赖数组的某些值发生变化时，用于记忆值的挂钩。

相反，useCallback 记住一个函数，一个回调，所以当组件re-renders时，你不必重新计算整个函数。

UseMemo 示例使用：

例如，您要计算购物车付款总额。我会记住总价值，只有在税收百分比也发生变化时才更改它。

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

UseCallBack 示例使用：

我想对 API 或数据库执行各种调用以搜索某些值（例如，在搜索栏上），但我不希望组件每次都重新计算函数呈现，所以我记住了函数：

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]);

通常，useCallback 用于还需要 useEffect 钩子的情况，以便在某些依赖项发生变化时挂载元素：

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

反应钩子中的 useCallback 和 useMemo 有什么区别？

what is difference between useCallback and useMemo in react hooks?

javascript

reactjs