useCallback返回n+1次，其中n是状态变量的数量

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

const [count, setCount] = useState(0);
const [name, setName] = useState('');

const handleClick = useCallback(() => {
  console.log(`Count: ${count}, Name: ${name}`);
}, [count, name]); // 仅在 count 或 name 变化时重新创建函数

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

const ParentComponent = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');

  const handleClick = useCallback(() => {
    console.log(`Count: ${count}, Name: ${name}`);
  }, [count, name]);

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <button onClick={() => setCount(count + 1)}>Increment Count</button>
      <button onClick={() => setName(name + 'a')}>Append to Name</button>
    </div>
  );
};

const ChildComponent = React.memo(({ onClick }) => {
  console.log('ChildComponent rendered');
  return <button onClick={onClick}>Click Me</button>;
});

export default ParentComponent;