【React】为什么Hooks不能出现在判断中

前言

在 React 中,Hooks 不能写在条件语句中,如下面这段代码点击button后则会报错。

javascript 复制代码
import { useEffect, useState } from "react"

export default () => {
  const [count, setCount] = useState(0)

  if (count > 0) {
    useEffect(() => {
      console.log("xxx")
    }, [])
  }

  const [name, setName] = useState("田本初")
  return (
    <>
      {count}
      <button onClick={() => setCount(count + 1)}>+1</button>
    </>
  )
}

原因

React 通过一个内部的调用栈来跟踪每个 Hook 在组件中的位置。Hooks 依赖于调用顺序来管理它们的内部状态。当组件重新渲染时,React 可以根据这个顺序正确地恢复每个 Hook 的状态。打破这一顺序可能会导致 React 无法正确地恢复和管理组件的状态,从而引发错误。

结合上面报错截图可以理解为:
Previous render: 上一次渲染时,React 期望 Hook 的调用顺序是:useState => useState
Next render: 下一次渲染时,React 检测到的实际 Hook 调用顺序是:useState => useEffect

在这个例子中,当 count 大于 0 时,useEffect 会被调用,但当 count 等于 0 时,useEffect 就不会被调用。这样,useEffect 和 useState 的调用顺序就会不同步,React 会混淆 Hook 的位置,进而导致状态错乱

解决方案

为了确保 Hooks 调用顺序的一致性,React 官方建议遵循以下规则:

1.只在顶层调用 Hooks:不要在循环、条件语句或嵌套函数中调用 Hooks。确保每次渲染时,Hooks 都以相同的顺序调用。

2.只在 React 函数组件或自定义 Hook 中调用 Hooks:不要在普通的 JavaScript 函数中使用 Hooks。

总结

Hooks 依赖调用顺序来管理组件状态,因此它们必须在组件的顶层调用,不能在条件语句或循环中使用。确保 React 能够正确地跟踪和管理状态。

相关推荐
JuneXcy10 分钟前
11.Layout-Pinia优化重复请求
前端·javascript·css
天下无贼!21 分钟前
【自制组件库】从零到一实现属于自己的 Vue3 组件库!!!
前端·javascript·vue.js·ui·架构·scss
CF14年老兵42 分钟前
✅ Next.js 渲染速查表
前端·react.js·next.js
dyb1 小时前
开箱即用的Next.js SSR企业级开发模板
前端·react.js·next.js
PineappleCoder1 小时前
JS 作用域链拆解:变量查找的 “俄罗斯套娃” 规则
前端·javascript·面试
知识分享小能手1 小时前
Vue3 学习教程,从入门到精通,Vue3 中使用 Axios 进行 Ajax 请求的语法知识点与案例代码(23)
前端·javascript·vue.js·学习·ajax·vue·vue3
533_1 小时前
[echarts] 更新数据
前端·javascript·echarts
讨厌吃蛋黄酥1 小时前
利用Mock实现前后端联调的解决方案
前端·javascript·后端
zzywxc7872 小时前
在处理大数据列表渲染时,React 虚拟列表是提升性能的关键技术,但在实际实现中常遇到渲染抖动和滚动定位偏移等问题。
前端·javascript·人工智能·深度学习·react.js·重构·ecmascript
JiaLin_Denny8 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包