React的hooks之前可以写return吗?

今天在项目中遇到这个问题。和同事在解决冲突时,有一个return语句写在hooks之前了,同事说return要写在hooks之后,所以我做个实验,发现了一个问题,hooks之前不能加return语句,不然会报错:
Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

错误原因:React Hooks 必须无条件地在组件顶层调用,任何条件返回(return)必须放在所有 Hook 调用之后。

下面是我的代码:

const demo = () => {
  const deviceType = 'pc'
  const [count, setCount] = useState(0);
//return不能在useEffect等hooks执行之前调用
  if  (deviceType === 'pc') return null
  useEffect(() => {
    console.log(count);
  }, [count]);

  return (
    <div className="grid-container">
      <Button onClick={() => setCount(count + 1)}>点击</Button>
    </div>
  );
};

export default demo;

问了一下DeepSeek,给了我下面的解释:

1. Hooks 调用顺序:所有 useXxx 必须无条件地在组件顶层调用,且顺序固定(不能写在条件、循环中)。
2. 条件返回:return 语句可以放在组件逻辑末尾,但要确保在所有 Hook 之后。
3. 返回值合法性:必须返回有效内容(如 null 表示不渲染),避免 undefined。

posted @ 2025-02-19 15:29  码磊姐姐  阅读(49)  评论(0)    收藏  举报