gpt4 book ai didi

reactjs - 如何重新渲染一个低优先级的重 React 组件?

转载 作者:行者123 更新时间:2023-12-02 18:32:57 26 4
gpt4 key购买 nike

有了一些参数,我有一个 React 组件可能需要几秒钟来呈现,但如果它不是最新的,那根本不是问题。

为了防止 UI 被卡住,我想仅在用户未更改表单参数时呈现它。

它可以是延迟、去抖动或其他方式。你将如何实现这一目标?谢谢!

最佳答案

react 18

在 React 18 中,发布了一个新的 API,让您可以将状态更新标记为不太重要的转换更新(与使用 useState/useReducer,现在被视为紧急更新)。

这是一个例子:

import {startTransition} from 'react';

// Urgent: Show what was typed
setInputValue(input);

// Mark any state updates inside as transitions
startTransition(() => {
// Transition: Show the results
setSearchQuery(input);
});

参见 https://reactjs.org/blog/2022/03/29/react-v18.html#new-feature-transitions

另一个 super 有用的帖子,有一个真实世界的例子:https://github.com/reactwg/react-18/discussions/65

关于reactjs - 如何重新渲染一个低优先级的重 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69158646/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com