Question

echo $array[count($array)-1]['weight'];和useCallback之间的主要区别是什么？以及何时使用React Hooks的useMemo？

Answer 1

useMemo(() => (bar) => foo + bar, [foo]);

与useCallback等效的代码：

useCallback((bar) => foo + bar, [foo]);

使用回调是useMemo的简写变体，可以与函数一起使用。

这就是它存在的原因：当您使用useMemo时，值通常会在其依赖项之一更改时更改。例如：

const fullName = useMemo(() => firstName + lastName, [firstName, lastName]);

如果firstName或lastName更改，fullName也将更改。另一方面，通常不需要重新计算函数本身，它们的依赖关系大多是可能会更改的闭包值。

const getFullName = useCallback(() => firstName + lastName, [firstName, lastName]);

在这里，当firstName或lastName发生变化时，我们不需要具有不同主体的完全不同的功能，但是我们确实需要具有相同功能的新实例，以便它具有最新的闭包值（依赖项）。因此，React团队只是为了方便起见添加了它，因为它是一个常见的用例，() => () =>语法有点难看。

Answer 2

它们两者都以一个函数和一组依赖项作为参数，例如“ useEffect”。仅当其中一个依赖项值更改时，函数的返回值才会更改。否则将返回缓存的值。

请注意，传递空的依赖关系数组或根本不传递任何数组将导致Hook在每次调用时返回一个已记录的值。

两者之间的主要区别在于，“ useCallback”返回一个记忆化的回调，而“ useMemo”返回一个记忆化的值，该值是函数参数的结果。

如果您需要处理大量数据，“ useMemo”是完美的挂钩，因为它将在第一次渲染时执行一次工作，然后在所有其他渲染上返回缓存的版本。

“ useCallback”的用法不同。以经常重新渲染的父组件为例。在父级内部，我们有一个子级组件，它带有一个函数属性。在每次重新渲染时，Child将无用地重新执行其功能道具。但是，如果您将“ useCallback”作为带有依赖项数组的prop传递，则可以解决此问题，因为仅当依赖项发生更改时函数才会执行。然后，每个其他重新渲染都将获得一个缓存的函数。

import React, { useState, useMemo, useCallback } from "react";

const App = () => {
  // We create two states that will keep count of the number of time all hooks are called
  const [callbackCount, setCallbackCount] = useState(0);
  const [memoCount, setMemoCount] = useState(0);

  const memoFunction = () => {
    console.log(memoCount, "memo called");
    // Do something that will take a lot of processing ...
  };

  // Here if we give an empty array of dependencies, the callback function will return the old value of callbackCount
  // because useCallback will return its memoized version
  const callbackFunction = useCallback(() => {
    console.log(callbackCount, "callback called");
    // Do something with callbackCount ...
    return callbackCount;
  }, [callbackCount]);

  // We create the memo hook, when memoCount changes, the function will be executed again
  useMemo(memoFunction, [memoCount]);

  return (
    <>
      {/* This component will receive a function that will change when the dependency value changes */}
      <ChildComponent action={callbackFunction} />

      {/* Change the callback hook dependency to trigger a change in the child */}
      <button onClick={() => setCallbackCount(callbackCount + 1)}>
        Change callback count
      </button>

      {/* After creating useMemo, each change of memoCount will trigger the function passed to the hook,
    otherwise the memoized value will be returned */}
      <button onClick={() => setMemoCount(memoCount + 1)}>
        Change memo count
      </button>
    </>
  );
};

const ChildComponent = ({action}) => {
  const [value, setValue] = useState(0)

  useEffect(() => {
    let val = action()
    setValue(val)
  }, [action]) 

  return(
    <>
    Child : {value}
    </>
  )
}

现在您应该准备使用React Hooks优化代码。回顾一下：您不应该对所有内容都使用“ useCallback”和“ useMemo”。 “ useMemo”应用于大数据处理，而“ useCallback”是一种为代码添加更多依赖性以避免不必要的渲染的方法。

Answer 3

useMemo和useCallback 都使用称为记忆力的东西，您可以将其视为钩子记住 >一些。

差异：

useMemo 将记住/记住您传递给函数的函数返回的值，直到依赖关系改变为止。

const num = 10
const result = useMemo(() => num + num, [num])
// result is now equal to 20

useCallback 将记住/记住您传递给它的实际功能，直到依赖关系发生变化为止，这会给您带来称为参照相等性。

const num = 10
const result = useCallback(() => num + num, [num])
// result is now equal to () => num + num.
// result === result between renders.

引用平等：

() => {} === () => {} // This is false

const a = () => {}
a === a // This is true

来源：What is the difference between useMemo and useCallback?

Answer 4

useMemo有助于防止重新呈现，除非对函数的依赖关系已更改，而useCallback有助于防止重新呈现，除非功能已更改。也就是说，当一个函数要作为参数传递给另一个函数时，useCallback仅允许在传递另一个函数后重新呈现。这里是资源的链接，可能有助于进一步解释

https://btholt.github.io/complete-intro-to-react-v5/hooks-in-depth

useCallback与useMemo以及何时使用它们

4 个答案: