0

我有一个关于在 React 的内置/非自定义组件上使用 useCallback 的问题。下面我提供了一个简单的例子。

我将“increment1”包装在 useCallback 中，这样它就不会被重新创建并作为新函数传递给 MyOwnButton 组件。因此，使用 React.memo，MyOwnButton 组件只会在 'count1' 更新时重新渲染。

我的问题来了。我也应该在 useCallback 中包含“increment2”吗？所以它不会作为新函数传递到标签中（或简化为“button2”）并防止“button2”也不必要地重新渲染？

import React, { memo, useCallback, useState } from 'react';

export default function App() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const increment1 = useCallback(() => {
    setCount1((prev) => prev + 1);
  }, []);
  const increment2 = () => setCount2((prev) => prev + 2);

  return (
    <>
      <MyOwnButton count={count1} onClick={increment1} />
      <button onClick={increment2}>button2:{count2}</button>
    </>
  );
}

const MyOwnButton = memo(({ count, onClick }: any) => {
  console.log('MyOwnButton');
  return <button onClick={onClick}>button1:{count}</button>;
});
4

0 回答 0