React useTransition

useTransition 是 React 18 中引入的新 Hook,它是并发模式(Concurrent Mode)功能的一部分。useTransition 允许你告诉 React 某些更新具有较低的优先级,React 可以在浏览器空闲时才去处理这些更新。这可以帮助提高应用的响应性,特别是在执行大型更新或密集型计算时。

作用:

useTransition 的主要作用是让你能够区分高优先级更新与低优先级更新。高优先级的更新(如用户输入)会立即执行,而低优先级的更新(如过滤列表、加载数据等)可以稍后执行,从而保持应用界面的流畅。

用法:

useTransition 返回一个数组,其中包含两个元素:

  1. startTransition 函数,你可以用它来触发低优先级的更新。
  2. isPending 状态,它是一个布尔值,表示是否有低优先级更新正在等待执行。
scss 复制代码
const [isPending, startTransition] = useTransition();

示例:

下面是一个使用 useTransition 的示例,展示了如何在过滤列表时保持界面的响应性:

javascript 复制代码
import React, { useState, useTransition } from 'react';

function FilteredList() {
  const [input, setInput] = useState('');
  const [list, setList] = useState(items); // 假设 items 是列表项数组

  // 使用 useTransition Hook
  const [isPending, startTransition] = useTransition();

  function handleInputChange(e) {
    const nextInput = e.target.value;
    setInput(nextInput);

    // 使用 startTransition 来执行低优先级的更新
    startTransition(() => {
      const filteredItems = items.filter(item => 
        item.includes(nextInput)
      );
      setList(filteredItems);
    });
  }

  return (
    <>
      <input type="text" value={input} onChange={handleInputChange} />
      {isPending ? <span>Loading...</span> : null}
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

使用注意事项:

  1. UI 指示 :由于低优先级的更新可能会延迟执行,建议使用 isPending 状态来向用户显示一些加载指示,如加载旋转器或进度条,以改善用户体验。
  2. 不要滥用useTransition 非常适合处理可能会导致长时间渲染的更新,但不是每个状态更新都需要用 useTransition 包裹。过度使用可能会导致不必要的复杂性。
  3. 确保 React 版本useTransition 是 React 18 的新功能,需要确保你使用的是支持 Concurrent Mode 的 React 版本。
  4. 并发模式useTransition 旨在与并发模式一起使用,在这种模式下,React 可以打断、暂停和恢复渲染工作。确保你的应用已启用并发模式。

useTransition 提供了一种优雅的方式来处理在用户界面中可能导致性能问题的复杂或密集型任务,帮助开发者提升应用的响应性和用户体验。

相关推荐
在钱塘江几秒前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码1 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说6 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户95251151401556 分钟前
最常用的JS加解密场景MD5
前端
Hilaku7 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球13 分钟前
mo契官网建设与SEO实践
前端
神仙别闹19 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c33 分钟前
react当中的this指向
前端·javascript·react.js
Java水解40 分钟前
Web API基础
前端
闲鱼不闲42 分钟前
实现iframe重定向通知父级页面跳转
前端