VUE3.0 をすぐに始める方法:
React 18 を学習するために、新しい概念であるtransitionが導入され、新しい API - startTransitionと 2 つの新しいフック - useTransitionとusedeferredValueが導入されました。この記事はここから始まります。アーリーアダプターの紹介を使用します。
1. 概要
この記事はtansitionの本来の目的、startTransition使用と導入useTransition使用と導入、useDeferredValue使用と導入の 4 つの部分に分かれています。
2. Transition の本来の目的、
transtionを直訳すると、过渡。 Tansition は基本的に、为了解决渲染并发问题所提出。 React では、コンポーネントの状態が変化して再レンダリングがトリガーされると、レンダリングを停止することはできません。コンポーネントが再レンダリングされるまで、ページはユーザーの操作に応答し続けることはできません。
为此react 18中更新都可以划分为以下两类：
紧急更新（urgent update）：用户期望马上响应的更新操作，例如鼠标单击或键盘输入。过渡更新: クエリ、検索の推奨、検索結果の表示など、許容可能な遅延のある一部の更新操作。// startTransition(()=> { startTransiton によって遷移用にマークされた後、更新します)
// 緊急でない更新の優先度が低くなり、setQueryValue(inputValue) の実行が遅れます。
})
// マークされていない場合、setInputValue(inputValue) は即時に実行されます。react 18 のstartTrionstionでマークされた更新は、一時的な更新です (実行優先度が低くなります)。このとき、react は内部状態の実行を遅らせます。内部スケジュールメカニズムに従って更新します。
開発中の開発者は、移行フックを通じてどの更新を移行イベントとしてマークするかを決定できます。マークが付けられると、優先度の低い実行を表します。つまり、通过区分更新优先级、優先度の高いイベントの応答性を維持し、提高用户交互体验，保持页面响应ができます。 。
3. startTransiton
startTransiton の使い方の紹介
const handleClick = () => {
//優先度の低い更新としてマークされたStartTransitionパッケージStartTransition（（）=> {
setQueryValue(inputValue)
})
// マークされていない場合は、setInputValue(inputValue) がすぐに実行されます
}首先我们来介绍下最简单的startTransition
、デモと比較を通じて、
大量の検索結果を偽造することで、検索結果を表示するシナリオのシミュレーションです。凍結しやすいものです。
123を継続的に入力し、検索ボックスvalueの変更（緊急の更新）と検索値searchVal （トランジションアップデート）の変更を監視し、コントロールバーに出力しようとします。
import React, { useEffect, useState, startTransition } from 'react';
'./App.css' をインポートします
const SearchResult = (小道具) => {
const resultList = props.query
? Array.from({ 長さ: 10000 }, (_, インデックス) => ({
ID: インデックス、
キーワード: `${props.query} -- 検索結果${index}`,
})): [];
return resultList.map(({ id, キーワード }) => (
<li key={id}>{キーワード}</li>
))
}
const App = () => {
const [type, setTpye] = useState(1)
const [値, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
useEffect(() => {
// 検索値の変化を監視 console.log('検索値 update++++++ への応答' + searchVal + '++++++++++++')
}, [検索値])
useEffect(() => {
console.log('入力ボックスの値更新に対する応答-----' + 値 + '-------------')
if (タイプ === 1) {
setSearchVal(値 || '-')
}
if (タイプ === 2) {
startTransition(() => {
setSearchVal(値 || '-')
})
}
}, [値, 型]);
戻る （
<div className='アプリ'>
<input value={value} onChange={e => setValue(e.target.value)} />
<div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setTpye(1)}>normal</div>
<div className={`type_button ${type === 2 ? 'type_button_checked' : ''}`} onClick={() => setTpye(2)}>transiton</div>
<ul>
<SearchResultクエリ={searchVal}></SearchResult>
</ul>
</div>
);
通常モードの
場合
如图所示： 123文字が継続的に入力されます。検索値はすぐに応答し、入力ボックスがフリーズして応答しませんレンダリングが完了するまで応答し続けます。
startTransition を使用した後
如图所示：文字 123 を連続入力すると、入力ボックスは応答し続けますが、ページのフィードバックを確保するために検索値への応答は遅れ、入力が終了するまで検索値への応答が開始されません。検索結果を表示し、ページの応答性を維持します。
4. useTransiton
useTransiton の使い方の紹介
import { useTransiton } from 'react'
const [isPending, startTransition] = useTransiton({timeoutMs: 2000})
// たとえば、保留状態では、スピナーを表示できます
startTransitionISPENDING？
isPendingはブール値で、遷移が完了するまで待つかどうかを React が伝える方法です。useTransition 、特定のtimeoutMs内で完了してstartTransitionない場合の遅延応答の値を受け入れます。useTransiton の簡単な解析
useTransition疑似コードで理解します。
関数 useTransition(){
const [isPending, setPending] = mountState(false);
const start = (コールバック)=>{
setPending(true);
// Scheduler.unstable_next 遷移モードを通じて、優先度の低いスケジューリング実行コールバック関数 // は更新の優先度を下げることができます。コールバックでトリガーされた更新の優先度が低い場合、
// 優先度の高い更新に設定されるか、現在のトランザクションがビジー状態の場合は、次のアイドル期間に適用されるようにスケジュールされます。
Scheduler.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1;
試す {
setPending(false);
//コールバック関数 callback() を実行します。
} ついに {
ReactCurrentBatchConfig.Transition = prectransition;
}
})
}
return [isPending, start];
startTransitionの実行中、 setPending は 2 回トリガーされます ( transition=1前に 1 回、その後に 1 回)
。
setPending(true) startTransitionが呼び出されたとき、およびtransiton Transitionタスクの更新は、 startTransition内のコールバック関数が実行されたときにsetPending(false)実行します。 React は保留中の値の変化に基づいて待機遷移時間を正確に把握し、これを使用してtimeoutMs超過したかどうか (渡された場合) を判断して更新を強制できます。
5. useDeferredValue
useDeferredValue の使い方の紹介
const [value, setValue] = useState('')
// defferedValue値は、状態の更新Const DeferredValue = useFerredValue（value、{timeoutms：2000}） timeoutMs設定できます。一段逻辑を処理し、useDeferred は一个新状态を生成します。useDeferredValue の使用
import React, { useEffect, useState, useTransition, useDeferredValue } from 'react';
'./App.css' をインポートします
const SearchResult = (小道具) => {
const resultlist = props.query
? Array.from({ 長さ: 10000 }, (_, インデックス) => ({
ID: インデックス、
キーワード： `$ {props.query} - 結果を検索$ {index}`、
})): [];
return resultList.map(({ id, キーワード }) => (
<li key={id}>{キーワード}</li>
))
}
const App = () => {
const [値, setValue] = useState('');
const searchValue = useDeferredValue(値, { timeoutMs: 2000 });
useEffect(() => {
console.log（ '入力ボックス値への応答-------' + value + '-------------'）
}、 [価値]）
useEffect(() => {
// 検索値の変化を監視 console.log('検索値への応答を更新++++++' + searchValue + '++++++++++++')
}, [検索値])
戻る （
<div className='アプリ'>
<入力値= {値} onchange = {e => setValue（e.target.value）} />
<div className = {`type_button type_button_checked`}> usedeferredValue </div>
<ul>
<searchResult query = {searchValue}> </searchResult>
</ul>
</div>
);
}; 
usedeferredValueの単純な分析では、
擬似コードを介してuseDeferredValue理解しています。
function suteferredValue（value）{
const [prevvalue、setValue] = updatestate（value）;
updateEffect(() => {
// useEffect の遷移モードを通じて値を更新します。
Scheduler.unstable_next(() => {
const prectransition = ReactCurrentBatchConfig.Transition;
ReactCurrentBatchConfig.transition = 1;
試す {
setValue(値);
} ついに {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}、 [価値]）;
prevValue を返します。
} useDeferredValue 、使用効果を介して着信値の変更を聴き、遷移タスクを介して値の変更を実行します。これにより、保证defrredValue的更新滞后于setState 。