VUE3.0을 빠르게 시작하는 방법: React 18을 배우려면
새로운 개념인 transition 이 도입되어 새로운 API인 startTransition 과 두 개의 새로운 후크인 useTransition 및 usedeferredValue 제공됩니다. 이 기사는 여기에서 시작됩니다. 얼리 어답터 소개를 사용하세요.
1. 개요
이 기사는tansition 의 원래 의도,startTransition 사용 및 소개useTransition 사용 및 소개,useDeferredValue 사용 및 소개의네 부분으로 구성됩니다.
2. 전환의 원래 의도,
transtion 다음과 같이 직접 번역됩니다.过渡. tansition은为了解决渲染并发问题所提出. React에서는 구성 요소 상태가 변경되고 다시 렌더링이 트리거되면 렌더링을 중지할 수 없습니다. 페이지는 구성 요소가 다시 렌더링될 때까지 사용자 상호 작용에 계속 응답할 수 없습니다.
이러한 이유로 React 18의 업데이트는 다음과 같은 두 가지 범주로 나눌 수 있습니다.
紧急更新: 마우스 클릭이나 키보드 입력 등 사용자가 즉시 응답할 것으로 기대하는 업데이트 작업입니다.过渡更新: 쿼리, 검색 추천, 검색 결과 표시 등과 같이 허용 가능한 지연이 있는 일부 업데이트 작업입니다.// 전환을 위해 startTransiton에 의해 표시된 후 startTransition(()=> { 업데이트
// 긴급하지 않은 업데이트는 우선순위가 낮아지고 setQueryValue(inputValue) 실행이 지연됩니다.
})
// 표시되어 있지 않으면 setInputValue(inputValue)가 즉시 실행됩니다. React 18에서 startTrionstion 으로 표시된 업데이트는 과도기적 업데이트입니다(이때 반응은 내부 상태의 실행을 지연시킵니다.) 내부 스케줄링 메커니즘에 따라 업데이트됩니다.
개발 중인 개발자는 전환 후크를 통해 전환 이벤트로 표시되는 업데이트를 결정할 수 있습니다. 일단 표시되면 우선 순위가 낮은 실행을 나타냅니다. 즉, React는通过区分更新优先级우선 순위가 높은 이벤트가 응답을 유지提高用户交互体验，保持页面响应수 있다는 것을 알고 있습니다. .
3. startTransiton
startTransiton 사용법 소개
const handlerClick = () => {
// 낮은 우선순위 업데이트로 표시된 startTransition 패키지 startTransition(()=> {
setQueryValue(입력값)
})
// 표시되어 있지 않으면 setInputValue(inputValue)가 즉시 실행됩니다.
} 먼저 가장 간단한 startTransition을 소개하겠습니다.
데모 및 비교를 통해
많은 수의 검색 결과를 위조하여 검색 결과를 표시하는 시나리오 시뮬레이션입니다. 얼어붙기 쉬운 것입니다.
123을 지속적으로 입력하고 검색창 value 의 변화(긴급 업데이트)와 검색값 searchVal 의 변화(전환 업데이트)를 모니터링하여 컨트롤바에 출력하려고 합니다.
import React, { useEffect, useState, startTransition } from 'react';
'./App.css' 가져오기
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ 길이: 10000 }, (_, 인덱스) => ({
아이디: 인덱스,
키워드: `${props.query} -- 검색 결과${index}`,
})): [];
return resultList.map(({ id, 키워드 }) => (
<li 키={id}>{키워드}</li>
))
}
const 앱 = () => {
const [유형, setTpye] = useState(1)
const [value, setValue] = useState('');
const [searchVal, setSearchVal] = useState('-');
useEffect(() => {
// 검색값 변경 모니터링 console.log('검색값 업데이트에 대한 응답++++++' + searchVal + '++++++++++++')
}, [searchVal])
useEffect(() => {
console.log('입력 상자 값 업데이트에 대한 응답----' + value + '-------------')
if (유형 === 1) {
setSearchVal(값 || '-')
}
if (유형 === 2) {
startTransition(() => {
setSearchVal(값 || '-')
})
}
}, [값, 유형]);
반품 (
<div className='앱'>
<입력 값={value} onChange={e => setValue(e.target.value)} />
<div className={`type_button ${type === 1 ? 'type_button_checked' : ''}`} onClick={() => setTpye(1)}>정상</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})
// 예를 들어 보류 상태에서는 Spinner를 표시할 수 있습니다.
{ isPending ? < Spinner /> : null } startTransition 은 콜백을 받아들이고 지연되어야 하는 상태를 React에 알리는 데 사용되는 함수입니다.isPending 전환이 완료될 때까지 기다릴지 여부를 알려주는 반응 방식인 부울입니다.useTransition timeoutMs 로 지연된 응답 값을 허용합니다. 지정된 timeoutMs 내에 완료되지 않으면 startTransition 콜백 함수에서 상태를 강제로 업데이트합니다.useTransiton의 간단한 분석
의사코드를 통해 useTransition 이해합니다.
함수 useTransition(){
const [isPending, setPending] = mountState(false);
const 시작 = (콜백)=>{
setPending(true);
// Scheduler.unstable_next 전환 모드를 통해 우선순위가 낮은 스케줄링 실행 콜백 함수는 // 업데이트 우선순위를 낮출 수 있습니다. 콜백에서 트리거된 업데이트의 우선순위가 낮은 경우
// 우선순위가 높은 업데이트로 설정되거나, 현재 트랜잭션이 바쁜 경우 다음 유휴 기간에 적용되도록 예약됩니다.
Scheduler.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1;
노력하다 {
setPending(false);
//콜백 함수 실행 callback();
} 마지막으로 {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}
return [isPending, 시작];
} startTransition 실행 중에 setPending이 두 번 트리거됩니다 transition=1 이전과 이후에 한 번). startTransition 이 호출되면 setPending(true) 되고, startTransition 내부의 콜백 함수가 실행되면 transiton 전환 작업은 setPending(false) 를 업데이트합니다. React는 보류 중인 값의 변경 사항을 기반으로 대기 전환 시간을 정확하게 파악하고 이를 사용하여 업데이트를 강제하기 위해 timeoutMs 초과되었는지(전달된 경우) 여부를 확인하는 데 사용할 수 있습니다.
5. useDeferredValue
useDeferredValue 사용법 소개
const [value, setValue] = useState('')
// 상태 업데이트 이후 deferredValue 값이 지연됩니다. const deferredValue = useDeferredValue(value, {timeoutMs: 2000}) timeoutMs 설정할 수 있습니다.一段逻辑처리하는 반면, useDeferred는一个新状态생성합니다.useDeferredValue
import React, { useEffect, useState, useTransition, useDeferredValue } from 'react';
'./App.css' 가져오기
const SearchResult = (props) => {
const resultList = props.query
? Array.from({ 길이: 10000 }, (_, 인덱스) => ({
아이디: 인덱스,
키워드: `${props.query} -- 검색 결과${index}`,
})): [];
return resultList.map(({ id, 키워드 }) => (
<li 키={id}>{키워드}</li>
))
}
const 앱 = () => {
const [value, setValue] = useState('');
const searchValue = useDeferredValue(value, { timeoutMs: 2000 });
useEffect(() => {
console.log('입력 상자 값에 대한 응답-------' + value + '---------------')
}, [값])
useEffect(() => {
// 검색 값 변경 모니터링 console.log('검색 값에 대한 응답 업데이트++++++' + searchValue + '++++++++++++')
}, [검색값])
반품 (
<div className='앱'>
<입력 값={value} onChange={e => setValue(e.target.value)} />
<div className={`type_button type_button_checked`}>useDeferredValue</div>
<ul>
<SearchResult 쿼리={searchValue}></SearchResult>
</ul>
</div>
);
}; 
useDeferredValue의 간단한 분석
의사 코드를 통해 useDeferredValue 이해합니다.
함수 useDeferredValue(값){
const [prevValue, setValue] = updateState(값);
updateEffect(() => {
// useEffect의 전환 모드를 통해 값을 업데이트합니다.
Scheduler.unstable_next(() => {
const prevTransition = ReactCurrentBatchConfig.transition;
ReactCurrentBatchConfig.transition = 1;
노력하다 {
setValue(값);
} 마지막으로 {
ReactCurrentBatchConfig.transition = prevTransition;
}
})
}, [값]);
이전값을 반환합니다;
} useDeferredValue useEffect를 통해 들어오는 값의 변경 사항을 수신한 다음 전환 작업을 통해 값 변경을 수행합니다. 이는保证defrredValue的更新滞后于setState .