2.12 useInsertionEffect在DOM更新前触发

一、useInsertionEffect

1. useInsertionEffect应用场景非常少，因为获取不到DOM元素，所以只在CSS-in-JS库中才会使用

2. 执行顺序：useInsertionEffect > useLayoutEffect > useEffect

   import { useEffect, useInsertionEffect, useLayoutEffect } from 'react'
   
   function App() {
     useEffect(() => {
       console.log('1')
     })
   
     useLayoutEffect(() => {
       console.log('2')
     })
   
     useInsertionEffect(() => {
       console.log('3')
     })
   
     return (
       <>
         <div>Default Template</div>
       </>
     )
   }
   
   export default App
   

3. 使用方法：

   import { useInsertionEffect, useRef } from 'react'
   
   function App() {
     const ref = useRef(null)
   
     useInsertionEffect(() => {
       const style = document.createElement('style')
       style.innerHTML = `
         .box {
           background: red;
           width: 100px;
           height: 100px;
         }
       `
       document.head.appendChild(style)
     })
   
     return (
       <>
         <div>Default Template</div>
         <div className="box" ref={ref}>
           12345
         </div>
       </>
     )
   }
   
   export default App
   

   在HTML渲染之前调用该钩子函数，提前生成css，用于减少浏览器的计算量