React Hooks规则疑问：官方示例在事件处理器调用setCount是否违规？

首先明确核心区别：React Hooks的规则仅约束以use开头的Hook函数（如useState、useEffect）的调用时机，而setCount这类由Hook返回的状态更新函数，不属于Hook本身，不受这些规则限制。

你之前了解的规则到底约束的是什么？ #

你列出的禁止项里，“不要在事件处理器中调用Hooks”指的是不能在事件处理器内部调用useXXX系列的Hook函数，比如以下写法才是违规的：

// ❌ 违规：在事件处理器里调用useState这个Hook
function handleClick() {
  const [temp, setTemp] = useState(0);
}

而你看到的官方示例里，useState是在组件的顶层（任何return之前）调用的，完全符合规则；handleClick里调用的是setCount——这是useState返回的更新函数，不是Hook，所以完全合规。

正确的写法就是官方示例那样 #

你提供的官方代码本身就是完全符合规则的写法：

import { useState } from 'react';

export default function Counter() {
  // ✅ 合规：在组件顶层调用useState Hook
  const [count, setCount] = useState(0);

  function handleClick() {
    // ✅ 合规：调用Hook返回的更新函数，不受Hook调用规则约束
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      You pressed me {count} times
    </button>
  );
}

总结一下：

• 必须保证所有useXXX开头的Hook在组件顶层、提前return之前调用，不能放在循环、条件、事件处理器、嵌套函数里。
• Hook返回的函数（如状态更新函数、useCallback返回的回调等）可以在任何需要的地方调用，包括事件处理器、嵌套函数等，不会违反规则。

内容的提问来源于stack exchange，提问作者rjapenga