react_hooks系列08_useId

useId是一个钩子，用于生成唯一的ID，在服务器和客户端之间是稳定的，同时避免hydration 不匹配。类似于Symbol ， 也类似于uuid。

注意：

useId不是用来生成列表中的键的。Keys 应该从你的数据中生成。

对于一个基本的例子，直接将id传递给需要它的元素。

对于同一组件中的多个ID，使用相同的ID附加一个后缀。

如下例子，保证了元素id的唯一性。

import React, { useId, useState } from 'react'

function UseIdDemo() {
    
  const userId = useId()
  const passwordId = useId()
  const id = useId()
  const [list, setList] = useState(['a', 'b', 'c'])
  return (
    

       

        用户名
        
      
 
        

        用户名
        
      
      

        密码
        
      
 
      

        用户名
        
      
      

        密码
        
      
      

        {
          list.map(item => {
            // React Hook "useId" cannot be called inside a callback. React Hooks must be called in a React function component or a custom React Hook function 
            // const id = useId()
            return (
              
{item}
            )
          })
        }
      
    
  )
}

export default UseIdDemo

注意：

useId 会生成一个包含 : token的字符串。这有助于确保令牌是唯一的，但在CSS选择器或API（如querySelectorAll）中不支持。

useId支持一个identifierPrefix，以防止在多根应用程序中发生碰撞。要配置，请参阅 hydrateRoot 和 ReactDOMServer的选项。

hooks需要在函数式组件以及自定义hook的顶级使用（返回jsx代码之前），不要在jsx代码中使用hooks