useDefferedValue的运用场景是什么?

作者站长头像
站长
· 阅读数 23

useDefferedValue的运用场景是什么?为什么我的这个并没有实现useDefferedValue的延迟效果(不影响input的更新)

import React, { memo, useDeferredValue, useEffect, useState } from 'react'

const SlowList = memo(function SlowList({ val }) {
    const startime = performance.now()
        while (performance.now() - startime < 500) {

        }
    return <>{val}</>
})

export default function DefferedValue() {
    const [state, setstate] = useState("");
    const defferedValue = useDeferredValue(state)
    return (
        <div>DefferedValue
            <input onChange={e => setstate(e.target.value)}
                value={state} />
            {/* <SlowList val={state}></SlowList> */}
            <SlowList val={defferedValue}></SlowList>
        </div>
    )
}

理论上不是应该每次输入,更新新的state的时候,slowList后台重新渲染,然后input的输入是不影响的,但是如果再次输入,就会触发slowList新的渲染,抛弃旧的渲染。就类似于渲染的防抖吗?


重新找了些资料,但是也没有解决问题。。。从结果来看,没用useDefferedValue的:useDefferedValue的运用场景是什么?

slowList的渲染次数确实和输入的次数一样,而且,有大大的卡顿感觉

用了useDefferedValue的:useDefferedValue的运用场景是什么?确实slowList的渲染次数只有两次,也就是中间打断了,但不知为什么,input还是有影响,有卡顿的感觉,看来目前还是只能使用防抖了,等成长了再回来看看。。

回复
1个回答
avatar
test
2024-06-20

1、使用场景?useDefferedValue 的作用在于延迟更新某个值的渲染(降低渲染的优先级),所以其运用场景是在用户输入频繁或处理大量数据时,避免过多的更新操作导致页面卡顿。通过将某个值包装在 useDeferredValue 中,React 会在 空闲时间段 更新该值,以保持页面的流畅性。其实在你的示例中已经实现了延迟更新的功能,即在 ShowList 渲染的过程中,优先更新 input 框的内容。

2、为什么会有卡顿的感觉?示例中,当用户输入第一个字符,React 会优先响应 input 框。响应过后,React 会被认为进入 空闲时间段,此时进入 ShowList 渲染阶段。在 ShowList 渲染时会等待 500ms,此时 JS 线程被阻塞,React 无法进行响应,这就是你为什么会觉得卡顿。

3、为什么 JS 线程被阻塞 React 就无法响应?React 不是号称实现了并发模式吗?因为 JS 是单线程的,React 的并发是基于 时间分片(React Fiber)的假并发。也就是当 JS 线程被阻塞时,React 就被卡死了,并没有办法根据优先级进行优先渲染。

希望我的回答对你的问题有所帮助~

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容