useDebugValue的定义:
useDebugValue用于自定义hook标签组件内的。
自定义hook的定义:
本质上就是一种函数代码逻辑的抽取,它本身并不算react的特性。自定义hook是一个函数,其名称以“use”开头,函数内部可以调用其他的hook。(实际上就是相当于一个函数,只是叫法不同,意义的理解也就有所不同)
知识延伸:
自定义hook和高阶组件的区别:
自定义hook相当于把公共方法共享,而高阶相当于传入一个组件当作参数传入,再返回一个新的组件。
自定义Hook示例:
import { useState, useEffect, useDebugValue } from 'react'
const Hook = () => {
const [ isGone, setIsGone ] = useState(true)
// 我认为useDebugValue就是用来说明自定义hook标签是做什么的
useDebugValue('xm isGone', (key) => {
return `${key}_${new Date().getMinutes()}: ${new Date().getSeconds()}`
})
useEffect(() => {
setIsGone(false)
return () => {
setIsGone(true)
};
}, [])
return isGone
}
export default Hook
使用自定义hook的组件
import React from 'react'
import useIsGone from './component/Hook'
const Home: React.FC = () => {
const isGone = useIsGone()
console.log('isGone:', isGone)
return <>
<div>自定义hook</div>
</>
}
export default Home
内容如有错误,请帮忙指出来,在此多谢了。