react教程，如何利用useTransition避免高频界面重绘？

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

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

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

场景描述

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

因为场景比较特殊，使用到useTransition()的机会也不是很多。

代码场景：一个输入框，下面会根据输入的内容的变化给予结果的联想显示，就类似于搜索引擎的搜索建议功能。因为联想的结果内容很多，而且现实量巨大。所以，在输入框里面输入内容的时候，会发生卡顿，无法继续输入的现象。

解决方案：使用useTransition()改善显示结果逻辑后，会降低下拉内容的绘制频率，从而保证客户输入的流畅度。

测试方法：在输入框里面连续不停的敲字母，观察两种不同的代码下的系统反应情况（客户输入是否卡顿，是否被阻碍输入）。

核心代码

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

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

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

全部代码

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相关经验文字，请点击参考：

• https://newsn.net/tag/react/

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