我应该为所有功能组件应用 useCallback/useMemo 吗？

Question

我有一个问题，我应该为所有功能组件的所有function/ variable 声明应用useCallback/ useMemo。 据我所知， useCallback/ useMemo 使function/ variable 声明在组件更新后不再运行。这些函数/变量只有在它们的依赖关系发生变化时才会重新定义。它使 React 的渲染工作在重新定义未更改的内容上花费更少的精力。当这些对象发生变化时，它只是比较对象（函数/变量与 useCallback/useMemo 的依赖关系）。我认为比较工作比重新定义要快。

useCallback钩子使用示例：

const onOpenEnd = useCallback(() => {
    if (BTSheetRef && BTSheetRef.current) BTSheetRef.current.open()
  }, [BTSheetRef, BTSheetRef.current]);

我有什么误解吗？提前致谢。

Answer 1

不适用于所有函数/变量，它应该用于某些场景

useCallback

• 这在将回调传递给依赖引用相等性以防止不必要的渲染的优化子组件时很有用。

如果在渲染父组件时不应该渲染子组件，那么你应该使用这个钩子，为什么？由于我们将相同的函数传递给子组件，因此子组件不会被不必要地渲染。

check some code here

const ChildComponent = React.memo(() => {
  const date = new Date().getTime();
  return (
    <div>
      {date}
    </div>
  );
});

export default function App() {
  const [time, setTime] = React.useState(null);

  //if we use this one child component will rerender only if the dependacies of the useCallback gets changed,
  //when dependancies change rect will return a new function, otherwise it will retun the old function.
  const fn = React.useCallback(() => {
  }, []);

  // if we use below fn as a prop to the child, child will rerender on every rendering of this component.
  //because react will give us a new function on every renderings.
  /* 
    const fn = () => {
    } 
  */

  return (
    <div>
      <ChildComponent fn={fn}/>

      <br />
      <p>changing the numbers means that child component gets rerendered</p>
      <button onClick={() => setTime(new Date().getTime())}>change state</button>
    </div>
  );
}

useMemo

• 您可以依赖 useMemo 作为性能优化，而不是语义保证。

意思是如果你要计算一个繁重的计算，那么你应该在这个钩子上接力，为什么？只是因为计算不会在每次渲染上都执行。

check some code here

export default function App() {
  const [time, setTime] = React.useState(null);

//memorizing result of complex calculations
  const heavyComputedValue = React.useMemo(() => {
    //some heavy calculations
    let val = new Date().getTime();
    for (let a = 0; a < 1000000000; a += 1) {
      val += a;
    }

    return val;
  }, []);

//-------without memorizing results of complex calculations----------//
// enabling this will show you component update gets lagging due to calculation happens every time unnecessarily
/*
  let val = new Date().getTime();
  for (let a = 0; a < 1000000000; a += 1) {
    val += a;
  }
  const heavyComputedValue = val;
  */
//--------------------------------------------------------//

  return (
    <div>
      <p>Time: {time}</p>
      Heavy computed value: {heavyComputedValue}
      <br />
      <button onClick={() => setTime(new Date().getTime())}>
        change state
      </button>
    </div>
  );
}

Answer 2

在使用 useCallback 和 useMemo 时，您仍然为每次渲染定义一个函数，这些函数只是记住您在 useCallback 和 useMemo 中定义的函数的结果，因此您不必经常运行它们。此外，当不使用 useCallback 或 useMemo 并第二次渲染您的组件时，您定义的原始函数会被垃圾收集（释放内存空间），然后创建一个新函数。然而，使用 useCallback 原始函数不会被垃圾收集并创建一个新函数，所以从内存角度来看，你（稍微）更糟。

因此，在 react 组件中使用常规函数通常会更好。除非您定义的函数运行起来很昂贵并且您想记住结果，否则不使用 useMemo 或 useCallback 会更有意义。

这里有一篇很好的文章解释了这一点：https://kentcdodds.com/blog/usememo-and-usecallback