【React】useEffect传入依赖数组时，如何阻止首次渲染加载

2024-05-20 09:55
react.js, 前端, typescript, javascript, ecmascript
90人已看

可以通过ref判断，第一次不执行逻辑

import { Button } from "antd"
import { useEffect, useRef, useState } from "react"

const Test = () => {
  const [number, setNumber] = useState(0)
  const isInit = useRef(true)
  useEffect(() => {
    if (isInit.current) {
      console.log("首次渲染")
      isInit.current = false
    } else {
      console.log("不是第一次渲染")
    }
  }, [number])
  return (
    <>
      Test{number}
      <Button onClick={() => setNumber(number + 1)}></Button>
    </>
  )
}
export default Test

在这里插入图片描述
为什么一定要使用ref

因为ref不像「useState」在组件重新渲染时初始化，「useRef」返回一个可变的 ref 对象，它在组件的整个生命周期内保持一致。