React 18之新hook

目录

useId

useId语法

增加前缀

实例

 useTransition 

useDeferredValue 

代码实例

 useSyncExternalStore 

 useInsertionEffect 

---

react18新出了5个hook, 分别是 : 

• useId 
• useTransition 
• useDeferredValue 
• useSyncExternalStore 
• useInsertionEffect 

useId

useId用于生成一个包含 :号的唯一id , 可在组件中多次使用, id是不重复的, 当项目中存在多个根应用时, 我们还可以给useId生成的id增加前缀 

useId语法

const id = useId();

增加前缀

增加前缀在 ReactDOM.createRoot 函数的第二个参数配置 identifierPrefix 字段即可, 在此说一下, react18已结废弃了 ReactDom.render方法, 改用root.render, ReactDOM.createRoot用于生成root根节点

const root = ReactDOM.createRoot(document.getElementById('root'), {identifierPrefix: 'app1-',})

实例

useId.js

import React, { useId } from 'react'

function UseId() {
  const id1 = useId()
  const id2 = useId()
  const id3 = useId()
  const id4 = useId()
  const id5 = useId()
  return (
    

      
useId
      
id1 : {id1}
      
id2 : {id2}
      
id3 : {id3}
      
id4 : {id4}
      
id5 : {id5}
    
  )
}
export default UseId

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'), {
  identifierPrefix: 'app1-',
})
root.render()