useCallback.md

现有如下代码：

function Button1() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(function () {
    console.log(count);
    setCount(count + 1);
  }, []);
  return (
    <button onClick={handleClick}>
      {count}
    </button>
 );
}

function Button2() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(function () {
    console.log(count);
    setCount(count + 1);
  }, [count]);
  return (
    <button onClick={handleClick}>
      {count}
    </button>
 );
}

function Button3() {
  const [count, setCount] = React.useState(0);
  const handleClick = React.useCallback(function () {
    console.log(count);
    setCount(count => count + 1);
  }, []);
  return (
    <button onClick={handleClick}>
      {count}
    </button>
 );
}

ReactDOM.render((
  <div>
    <Button1/>
    <Button2/>
    <Button3/>
  </div>
), document.querySelector('#app'));

当运行时

• Button1 上显示：__ (1) __
• Button2 上显示：__ (2) __
• Button3 上显示：__ (3) __

当点击 Button1 时

• 控制台显示：__ (4) __
• Button1 上显示：__ (5) __
• 此时 Button1 组件函数创建了 __ (6) __ 个闭包

当第二次点击 Button1 时

• 控制台显示：__ (7) __
• Button1 上显示：__ (8) __
• 此时组件函数创建了 __ (9) __ 个闭包

当点击 Button2 时

• 控制台显示：__ (10) __
• Button2 上显示：__ (11) __
• 此时 Button2 组件函数创建了 __ (12) __ 个闭包

当第二次点击 Button2 时

• 控制台显示：__ (13) __
• Button2 上显示：__ (14) __
• 此时组件函数创建了 __ (15) __ 个闭包

当点击 Button3 时

• 控制台显示：__ (16) __
• Button3 上显示：__ (17) __
• 此时 Button3 组件函数创建了 __ (18) __ 个闭包

当第二次点击 Button3 时

• 控制台显示：__ (19) __
• Button3 上显示：__ (20) __
• 此时组件函数创建了 __ (21) __ 个闭包