关于前端:React-18-TransitionstartTransitonuseTransitonuseDeferredValue

5次阅读

共计 5538 个字符，预计需要花费 14 分钟才能阅读完成。

React 18 中，引入了一个新概念——transition，由此带来了一个新的 API——startTransition和两个新的 hooks——useTransition和usedeferredValue。

1）transition 产生初衷

transtion 间接翻译为 过渡。tansition 实质上是 为了解决渲染并发问题所提出。在 React 中一旦组件状态扭转并触发了从新渲染，则无奈进行渲染。直到组件从新渲染结束，页面能力持续响应用户的交互。

为此 react 18 中更新都能够划分为以下两类：

  • 紧急更新（urgent update）：用户冀望马上响应的更新操作，例如鼠标单击或键盘输入。
  • 过渡更新（transition update）：一些提早能够承受的更新操作，如查问时，搜寻举荐、搜寻后果的展现等。
// 被 startTransiton 标记后为过渡更新
startTransition(()=> {
    // 非紧急更新，会被升高优先级，提早执行
    setQueryValue(inputValue)
})

// 未被标记则马上执行
setInputValue(inputValue)

在 react 18 中被 startTrionstion 标记的更新，即为过渡更新（执行的优先级被升高），此时 react 会依据外部的调度机制提早执行外部的 state 更新。

开发中开发者能够通过 transition hook 决定哪些更新被标记为 transition 事件。一旦被标记则代表为低优先级执行，即 react 晓得该 state 能够提早更新，通过 辨别更新优先级 ，让高优先级的事件放弃响应， 进步用户交互体验，放弃页面响应。

2）startTransiton

startTransiton 应用介绍

const handleClick = () => {
    // startTransition 包裹标记为低优先级更新
    startTransition(()=> {setQueryValue(inputValue)
    })
    
    // 未被标记则马上执行
    setInputValue(inputValue)
}

首先咱们来介绍下最简略的startTransition

  • startTransiton 是一个承受回调的函数，用于告知 React 须要提早更新的 state；
  • 如果某个 state 的更新会导致组件挂起，则应该包裹在 startTransition 中。

这是一个对输出字符后展现搜寻后果的场景模仿，通过伪造大量搜寻后果，模仿容易卡顿的状况。
咱们试着间断输出 123，监听搜寻框值 value 变动 (urgent update) 和搜寻值 searchVal 变动 (transition update) 并输入到管制栏。

import React, {useEffect, useState, startTransition} from 'react';
import './index.css'

const SearchResult = (props) => {
  const resultList = props.query
    ? Array.from({length: 100000}, (_, index) => ({
      id: index,
      keyword: `${props.query} -- 搜寻后果 ${index}`,
    })) : [];
  return resultList.map(({id, keyword}) => (<li key={id}>{keyword}</li>
  ))
}

export default () => {const [type, setType] = useState(1)
  const [value, setValue] = useState('');
  const [searchVal, setSearchVal] = useState('');

  useEffect(() => {
    // 监听搜寻值扭转
    console.log('对搜寻值更新的响应 ++++++' + searchVal + '+++++++++++')
  }, [searchVal])

  useEffect(() => {
    // 监听输入框值扭转
    console.log('对输入框值更新的响应 -----' + value + '-------------')
  }, [value])

  useEffect(() => {if (type === 1) {setSearchVal(value)
    }
    if (type === 2) {startTransition(() => {setSearchVal(value)
      })
    }
  }, [value]);

  return (
    <div className='App'>
      <h3>StartTransition</h3>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setType(1)}>normal</div>
      <div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setType(2)}>transiton</div>
      <ul>
        <SearchResult query={searchVal}></SearchResult>
      </ul>
    </div>
  );
}

一般模式

startTransiton 模式

和 setTimeout 的区别

就下面 setSearchQuery 的例子，应用 setTimeout 也能达到类似的目标，那这个 startTransition 和 setTimeout 有啥区别？

  1. 一个重要区别是setTimeout 是「提早」执行，startTransition 是立刻执行的，传递给 startTransition 的函数是同步运行，然而其外部的所有更新都会标记为非紧急，React 将在稍后解决更新时决定如何 render 这些 updates，这意味着将会比 setTimeout 中的更新更早地被 render。
  2. 另一个重要区别是用 setTimeout 包裹的如果是内大面积的更新操作会 导致页面阻塞不可交互，直到超时 。这时候用户的输出、键盘按下等紧急更新操作将被阻止。而 startTransition 则不同，因为它所标记的更新都是 可中断 的，所以 不会阻塞 UI交互。即便用户输出发生变化，React 也不用持续渲染用户不再感兴趣的内容。
  3. 最初，因为 setTimeout 是异步执行，哪怕只是展现一个小小的 loading 也要编写异步代码。而通过 transitions，React 能够应用 hook 来追踪 transition 的执行状态，依据 transition 的以后状态来更新 loading。

3）useTransiton

useTransiton 应用介绍

import {useTransiton} from 'react'

const [isPending, startTransition] = useTransiton({timeoutMs: 2000})
// 例如, 在 pending 状态下，您能够展现一个 Spinner
{isPending ? < Spinner /> : null}
  • startTransition 是一个承受回调的函数，用于告知 React 须要提早更新的 state。
  • isPending 是一个布尔值，这是 react 告知咱们是否期待过渡实现的形式。
  • useTransition 承受带有 timeoutMs 的提早响应的值, 如果给定的 timeoutMs 内未实现，它将会强制执行 startTransition 回调函数内 state 的更新。
import React, {useEffect, useState, useTransition} from 'react';
import './index.css'

const SearchResult = (props) => {
  const resultList = props.query
    ? Array.from({length: 100000}, (_, index) => ({
      id: index,
      keyword: `${props.query} -- 搜寻后果 ${index}`,
    })) : [];
  return resultList.map(({id, keyword}) => (<li key={id}>{keyword}</li>
  ))
}

export default () => {const [type, setType] = useState(1)
  const [value, setValue] = useState('');
  const [searchVal, setSearchVal] = useState('');
  const [loading, startTransition] = useTransition({timeoutMs: 2000});

  useEffect(() => {
    // 监听搜寻值扭转
    console.log('对搜寻值更新的响应 ++++++' + searchVal + '+++++++++++')
  }, [searchVal])

  useEffect(() => {
    // 监听输入框值扭转
    console.log('对输入框值更新的响应 -----' + value + '-------------')
  }, [value])

  useEffect(() => {if (type === 1) {setSearchVal(value)
    }
    if (type === 2) {startTransition(() => {setSearchVal(value)
      })
    }
  }, [value]);

  return (
    <div className='App'>
      <h4>UseTransition</h4>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setType(1)}>normal</div>
      <div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setType(2)}>transiton</div>
      {loading && <p> 数据加载中，请稍候...</p>}
      <ul>
        <SearchResult query={searchVal}></SearchResult>
      </ul>
    </div>
  );
}

4）useDeferredValue

useDeferredValue 应用介绍

const [value, setValue] = useState('')
// defferedValue 值延后于 state 更新
const deferredValue = useDeferredValue(value, {timeoutMs: 2000})
  • useDeferredValue 返回一个提早响应的状态，能够设置最长延迟时间 timeoutMs。
  • 能够传入可选的 timeoutMs，如果给定的 timeoutMs 内未实现，它将会强制更新。
  • 与useTransitio n 的不同：useTransition 是解决一段逻辑，而 useDeferred 是产生一个新状态。

useDeferredValue通过 useEffect 监听传入值的变动，而后通过过渡工作执行值的扭转。这样保障defrredValue 的更新滞后于 setState，同时合乎过渡更新的准则，因为是通过 transition 调度机制执行的。

import React, {useEffect, useState, useTransition, useDeferredValue} from 'react';
import './index.css'

const SearchResult = (props) => {
  const resultList = props.query
    ? Array.from({length: 100000}, (_, index) => ({
      id: index,
      keyword: `${props.query} -- 搜寻后果 ${index}`,
    })) : [];
  return resultList.map(({id, keyword}) => (<li key={id}>{keyword}</li>
  ))
}

export default () => {const [value, setValue] = useState('');
  const searchValue = useDeferredValue(value, { timeoutMs: 2000});

  useEffect(() => {console.log('对输入框值的响应 --------' + value + '---------------')
  }, [value])

  useEffect(() => {
    // 监听搜寻值扭转
    console.log('对搜寻值的更新响应 ++++++' + searchValue + '+++++++++++')
  }, [searchValue])

  return (
    <div className='App'>
      <h3>useDeferredValue</h3>
      <input value={value} onChange={e => setValue(e.target.value)} />
      <div className='useDeferredValue'>useDeferredValue</div>
      <ul>
        <SearchResult query={searchValue}></SearchResult>
      </ul>
    </div>
  );
};
正文完
前端
发表至： 前端
2022-07-19
 0
关于前端:使用-Rush-pnpm-的踩坑记录
关于前端:packagejsonpackagelockjson与npm版本映射关系
关于前端:在Vuejs中加载字体的最佳做法
关于前端:零基础教你学前端5初识图片标签逐字稿

站内搜索

-「」