Skip to content

useInsertionEffect函数

uselnsertionEffect是在DOM渲染之前执行,uselnsertionEffect应用场景非常少,因为获取不到DOM元素,所以只在CSS-in-JS库中才会使用。

1. 使用useInsertionEffect

jsx
import { useEffect, useInsertionEffect, useLayoutEffect, useRef } from 'react'

function App() {
  const myRef = useRef(null)
  useEffect(() => {
    console.log("useEffect开始执行。。。。。", myRef.current)
  })

  useLayoutEffect(() => {
    console.log("useLayoutEffect开始执行。。。。。", myRef.current)
  }, [])

  useInsertionEffect(()=>{
    console.log("useInsertionEffect开始执行。。。。。", myRef.current)
  })

  return (
    <div>
      <div ref={myRef}>
        Hello APP
      </div>
    </div>
  )
}
export default App

运行效果:
Alt text