我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

react数据是可以绑定的,数据变化可以引起界面上的元素变化。如果这个时候,数据变化十分频繁,并且界面重绘非常耗时,那就会发生界面假死卡顿的问题。为了解决这个问题,react提出了useTransition()函数,缓解界面高频重绘可能带来的卡顿问题。

苏南大叔:react教程,如何利用useTransition避免高频界面重绘? - react-useTransition
react教程,如何利用useTransition避免高频界面重绘?(图4-1)

苏南大叔的程序如此灵动博客,记录苏南大叔和计算机代码的故事。测试环境:create-react-app@5.0.1react@18.2.0react-dom@18.2.0node@16.14.2

场景描述

react官方描述:
https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition

苏南大叔:react教程,如何利用useTransition避免高频界面重绘? - react文档
react教程,如何利用useTransition避免高频界面重绘?(图4-2)

因为场景比较特殊,使用到useTransition()的机会也不是很多。本文中的代码场景是:一个输入框,下面会根据输入的内容的变化给予结果的联想显示,就类似于搜索引擎的搜索建议功能。因为联想的结果内容很多,而且现实量巨大。所以,在输入框里面输入内容的时候,会发生卡顿,无法继续输入的现象。

使用useTransition()改善显示结果逻辑后,会降低下拉内容的绘制频率,从而保证客户输入的流畅度。测试方法就是:在输入框里面连续不停的敲字母,观察两种不同的代码下的系统反应情况(客户输入是否卡顿,是否被阻碍输入)。

核心代码

const [pending, doTransition] = React.useTransition();

代码的使用方式,很好理解,和useState()之类的很相似。【返回一个状态值表示过渡任务的等待状态,以及一个启动该过渡任务的函数。】不过,

  • pending(可以改名)【指示过渡任务何时活跃以显示一个等待状态】。必然是个布尔变量,它的改变并不是代码能主动控制结果的。是由react系统来决定什么时候,是true什么时候是false
  • doTransition(可以改名)【允许你通过标记更新将提供的回调函数作为一个过渡任务】。是个函数,需要用它来包裹耗时频繁界面绘制的部分。

苏南大叔:react教程,如何利用useTransition避免高频界面重绘? - 运行截图
react教程,如何利用useTransition避免高频界面重绘?(图4-3)

全部代码

import React from 'react';
export default function App() {
  const [pending, doTransition] = React.useTransition();
  const [result, setResult] = React.useState([]);
  const handleChange = (e) => {
    doTransition(() => {
      var result = [];
      const max_size = 500;    // 这里返回数据较大,需要大量界面重绘
      for (var i = 0; i < max_size; i++) {
        result.push(<div key={i}>苏南大叔看到:{e.target.value}</div>)
      }
      setResult(result);
    });
  };
  return (
    <div>
      <input type="text" onChange={handleChange.bind()} />
      {pending ? "loading" : result}
    </div>
  );
}

设置好大量重复部分的逻辑后,由react来决定其是否在重绘中的pending变量。根据它是否为true来显示不同的结果。

{pending ? "loading" : result}

苏南大叔:react教程,如何利用useTransition避免高频界面重绘? - 核心代码
react教程,如何利用useTransition避免高频界面重绘?(图4-4)

结束语

更多react相关经验文字,请点击参考:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   react