React 18之新hook_react18新特性hook-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_58239318/article/details/124187534

本文介绍了React 18新增的五个Hook：useId、useTransition、useDeferredValue、useSyncExternalStore和useInsertionEffect。useId生成唯一ID，支持添加前缀；useTransition标记非紧急更新，优化大量渲染场景；useDeferredValue延迟更新，减少不必要的渲染；useSyncExternalStore同步外部存储；useInsertionEffect在插入DOM时同步触发，适用于注入样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 (
    <div style={
  { height: 200, width: '100%', background: 'skyblue' }}>
      <h1>useId</h1>
      <p>id1 : {id1}</p>
      <p>id2 : {id2}</p>
      <p>id3 : {id3}</p>
      <p>id4 : {id4}</p>
      <p>id5 : {id5}</p>
    </div>
  )
}
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(<App />)