位置: IT常识 - 正文
React--》一些不常见的hook函数讲解(react.strictmode)
发布时间：2024-01-14目录
Hook函数
useImperativeHandle
useLayoutEffect和useInsertionEffect与useEffect区别
useDebugValue
useDeferredValue
useTransition
Hook函数
推荐整理分享React--》一些不常见的hook函数讲解(react.strictmode)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:react either,react_,react 问题,react有什么坑点,react有什么坑点,react 问题,react bus,react 问题,内容如对您有帮助，希望把文章链接给更多的朋友！
关于React中的钩子函数，在我之间的文章中讲解完我们已经非常熟悉了，钩子函数的功能非常强大而它使用又十分简单。关于钩子函数的使用，我们只需记住两点：
1）钩子函数只能在react组件和自定义钩子中使用
2）钩子函数不能再嵌套函数或其他语句(if、switch、white、for等)中使用
接下来开始介绍一些在日常开发中不是那么常用的钩子函数，但是在某个时刻可能你需要用到它：
useImperativeHandle你可以设置一个场景，父子组件相互传递值和方法对你来说都没有任何问题，但是我想让你直接去修改子组件的某个dom元素的值呢？一开始你是不是有点懵不知道如何下手，react官方给我们提供了一个钩子函数 useImperativeHandle 专门解决这个问题。具体的介绍可以参考 官方文档 这里仅仅提供一个案例。
修改子组件中的 h2 标题内容，可以在该组件中通过forwardRef来指定要暴露给外部组件的ref
import React, { useEffect, useRef, useState } from 'react'const App = () => { const [count,setCount] = useState(0) const ChildRef = useRef() const addCount = () =>{ setCount(pre => pre+1) } useEffect(()=>{ ChildRef.current.innerText = 'Child' + count }) return ( <div> <h2>App根组件--{count}</h2> <button onClick={addCount}>+1</button> <Child ref={ChildRef} /> </div> )}// 定义一个App子组件const Child = React.forwardRef((props,ref) =>{ return ( <div> <h3 ref={ref}>Child子组件</h3> </div> )})export default App这种 forwardRef 向外直接暴露ref虽然能够达到一些效果，但是有点不安全，让子组件的dom元素直接脱离子组件本身掌控，由别的组件进行掌握，这让代码也变得难以维护，所以这种方法虽然可行但是不是很可取，所以我们需要更为合适的 useImperativeHandle 钩子函数来处理，如下：
如果父组件想修改子组件中的数据的话，也可以调用子组件中的方法，如下：
import React, { useEffect, useImperativeHandle, useRef, useState } from 'react'const App = () => { const [count,setCount] = useState(0) const ChildRef = useRef() const addCount = () =>{ setCount(pre => pre+1) } useEffect(()=>{ ChildRef.current.changeInputValue(count) }) return ( <div> <h2>App根组件--{count}</h2> <button onClick={addCount}>+1</button> <Child ref={ChildRef} /> </div> )}// 定义一个App子组件const Child = React.forwardRef((props,ref) =>{ const myRef = useRef() useImperativeHandle(ref,()=>{ return { changeInputValue(val){ myRef.current.value = val } } }) return ( <div> <h3>Child子组件</h3> <input ref={myRef} type="text" /> </div> )})export default AppuseLayoutEffect和useInsertionEffect与useEffect区别
在了解这三者的区别之前，我们应该知道他们的执行时机分别在哪一时刻，如下：
useLayoutEffect：useLayoutEffect的方法签名和useEffect一样，功能也类似，不同的是其执行时机比useEffect要早，其会在DOM改变后调用，useLayoutEffect使用场景不多，在实际开发中在其要修改元素样式且使用useEffect会出现闪烁现象时可以使用该钩子函数进行替换，当然这种情况在react18版本之前的差异性比较明显，而到了react18之后两者的差异几乎是没有了，这里简单提及一下。
当然，我还是推荐大家使用经典的useEffect，当你的项目使用useEffect而遇到一些问题之后，也可以考虑一下是否是执行时机的问题，这里的话就可以使用另外两个钩子函数了。
useDebugValue介绍一个类似于玩具的钩子函数，用来给自定义钩子设置标签，标签会在react开发者工具中显示，用来调试自定义钩子，但是不常用，如下：
会在开发者工具中对自定义钩子进行标识，作用嘛为了后期的代码调试，但是我感觉作用不大，大家了解一下即可：
useDeferredValueuseDeferredValue用来设置一个延迟的state，比如我们创建一个state，并使用useDeferredValue获取延迟值。延迟值可以使用在这样一个场景中，一个state需要在多个组件中使用，但是一个组件渲染比较快另一个组件渲染比较慢，这样我们可以为该state创建一个延迟值，渲染组件快的组件使用正常的state优先显示，渲染慢的组件使用延迟值慢一步渲染，当然这里必须结合React.memo或useMemo才能发挥其作用，不了解这两个函数的可以先参考我之前的文章对其的讲解：React组件变化每次都会导致重新渲染，如何解决？，现在开始着重讲解这个钩子函数的使用
具体操作可参考官方示例：
useTransition当我们在组件中修改state时，会遇到复杂一些的state，当修改这些state时，甚至会阻塞到整个应用的运行，为了降低这种state的影响，react为我们提供了useTransition，通过useTransition可以降低setState的优先级。
useTransition会返回一个数组，数组中有两个元素，第一个元素是isPending，它是一个变量用来记录transition是否在执行中，第二个元素是startTransition，它是一个函数，可以将setState在其回调函数中调用，这样setState方法会被标记为transition并不会立即执行，而是在其他优先级更高的方法执行完毕才会执行。
还有一个钩子函数为useId：生成唯一id，使用于需要唯一id的场景，但是适用于列表的key，这里简单的提一下。
上一篇：Vue3中样式渗透:deep()为什么无效(vue的样式穿透)
下一篇：Vue常见错误---Error in mounted hook(vue err)
