19 useTransition基础用法

19 useTransition基础用法#

useTransition概念介绍#

react提供了useDeferredValue发挥类似防抖节流的作用，而useTransition也是类似的作用，但是该hook是通过降低数据渲染的优先级来达到优先更新其他数据

useTransition用来解决什么问题？#

首先给定一个场景，开发时经常会遇到需要联想输入，也就是输入的同时要返回联想搜索结果的列表。
但是这个列表有时返回值非常的长，有时会导致用户输入值的更新缓慢，这里就产生了一个问题，当页面有大量UI更新的时候，怎么处理数据更新不会卡顿。
可以手写防抖节流，防抖有一个弊端，当我们长时间的持续输入（时间间隔小于防抖设置的时间），页面就会长时间都不到响应。而startTransition 可以指定 UI 的渲染优先级，哪些需要实时更新，哪些需要延迟更新。即使用户长时间输入最迟 5s 也会更新一次。
也可以用useDeferredValue，也可以用“可视窗口加载”的方案，在这里介绍怎么用useTransition解决

useTransition源码#

回到useTransition的学习中，首先看一下React源码中的ReactHooks.js。

1
export function useTransition(): [
2
  boolean,
3
  (callback: () => void, options?: StartTransitionOptions) => void,
4
] {
5
  const dispatcher = resolveDispatcher();
6
  return dispatcher.useTransition();
7
}

再根据引入文件，到react-reconciler/src/ReactInternalTypes.js找到Dispatch里最终调用的useTransition

1
  useTransition(): [
2
    boolean,
3
    (callback: () => void, options?: StartTransitionOptions) => void,
4
  ],

上述代码看不懂没关系，本系列教程只是讲述“如何使用Hook”，并不是“Hook源码分析”。^_^

useTransition基本用法#

useTransition()函数可以不传参，传参可以传一个毫秒值用来修改最迟更新时间，startTransition回调里的赋值将会被降低优先级。isPending 指示过渡任务何时活跃以显示一个等待状态。

代码形式

1
const [isPending, startTransition] = useTransition();
2

3
startTransition(() => {
4
  setCount(count + 1);
5
})

传参写法

1
// 延迟两秒
2
const [isPending, startTransition] = useTransition(2000);
3

4
startTransition(() => {
5
  setCount(count + 1);
6
})

useTransition使用示例#

举例：搜索引擎的关键词联想。一般来说，对于用户在输入框中输入都希望是实时更新的，如果此时联想词比较多同时也要实时更新的话，这就可能会导致用户的输入会卡顿。这样一来用户的体验会变差，这并不是我们想要的结果。

我们将这个场景的状态更新提取出来：一个是用户输入的更新；一个是联想词的更新，这个两个更新紧急程度显然前者大于后者。

这里更新效果可能还不够明显，可以打开浏览器控制台，点击performance insights项，在Measure page load右边有个下拉选项，在cpu那栏的右边下拉选择4x slowdown可以将浏览器运行速度调慢四倍，这样卡顿会明显些。

这里拆分为两个组件，父组件是useTransition的使用，子组件是列表渲染，代码如下：

父组件：

1
import { useState, useTransition } from 'react'
2
import ProductList from './components/ProductList'
3

4
// 列表数据的生成
5
export function generateProducts() {
6
  const products: Array<string> = []
7
  for (let i = 0; i < 10000; i++) {
8
    products.push(`Product ${i + 1}`)
9
  }
10
  return products
11
}
12

13
// 列表数据
14
const dummyProducts = generateProducts()
15

16
// 用户输入时过滤搜索，达到一个联想输入的效果
17
function filterProducts(filterTerm) {
18
  if (!filterTerm) {
19
    return dummyProducts
20
  }
21
  return dummyProducts.filter((product) => product.includes(filterTerm))
22
}
23

24
function App() {
25
  const [isPending, startTransition] = useTransition()
26
  const [filterTerm, setFilterTerm] = useState('')
27

28
  const filteredProducts = filterProducts(filterTerm)
29

30
  function updateFilterHandler(event) {
31
    // 列表数据赋值的运行等级
32
    startTransition(() => {
33
      setFilterTerm(event.target.value)
34
    })
35
  }
36

37
  return (
38
    <div id="app">
39
      <input type="text" onChange={updateFilterHandler} />
40
      {isPending && <p style={{ color: 'white' }}>更新列表。. </p>}
41
      <ProductList products={filteredProducts} />
42
    </div>
43
  )
44
}
45

46
export default App

子组件：

1
import { useDeferredValue } from "react";
2

3
function ProductList({ products }) {
4
  const deferredProducts = useDeferredValue(products);
5
  return (
6
    <ul>
7
      {deferredProducts.map((product, index) => (
8
        <li key={index}>{product}</li>
9
      ))}
10
    </ul>
11
  );
12
}
13

14
export default ProductList;

通过这个案例，相信你对useMemo的机制和用法一定有所掌握。

至此，关于useTransition基础用法已经讲完。