Cómo comenzar rápidamente con VUE3.0: al ingresar para aprender
React 18, se introduce un nuevo concepto: transition
, que trae una nueva API: startTransition
y dos nuevos ganchos: useTransition
y usedeferredValue
. Este artículo comienza desde aquí Utilice presentaciones de los primeros usuarios.
1. Descripción general
Este artículo se divide en cuatro partes:
tansition
,startTransition
useTransition
,useDeferredValue
2. La intención original de la transición,
transtion
se traduce directamente como过渡
. La transición se为了解决渲染并发问题所提出
. En React, una vez que el estado del componente cambia y se activa una nueva renderización, no se puede detener la renderización. La página no puede continuar respondiendo a la interacción del usuario hasta que se vuelva a representar el componente.
Por esta razón, las actualizaciones en React 18 se pueden dividir en las dos categorías siguientes:
紧急更新
: operaciones de actualización que los usuarios esperan que respondan de inmediato, como clics del mouse o entradas del teclado.过渡更新
: algunas operaciones de actualización con un retraso aceptable, como consulta, recomendación de búsqueda, visualización de resultados de búsqueda, etc.// Actualiza startTransition(()=> { después de ser marcado por startTransiton para la transición // Se reducirá la prioridad de las actualizaciones no urgentes y se retrasará la ejecución de setQueryValue(inputValue). }) // Si no está marcado, setInputValue (inputValue) se ejecutará inmediatamente.
La actualización marcada por startTrionstion
en reaccionar 18 es una actualización de transición (la prioridad de ejecución se reduce en este momento, reaccionar retrasará la ejecución del estado interno). actualizar según el mecanismo de programación interno.
Los desarrolladores en desarrollo pueden decidir qué actualizaciones se marcan como eventos de transición a través de enlaces de transición. Una vez marcado, representa una ejecución de baja prioridad, es decir, React sabe que el estado puede retrasarse en la actualización.通过区分更新优先级
, los eventos de alta prioridad pueden seguir respondiendo,提高用户交互体验,保持页面响应
.
3.
Introducción al uso de startTransiton startTransiton
const handleClick = () => { // paquete startTransition marcado como actualización de baja prioridad startTransition(()=> { establecerQueryValue(valordeentrada) }) // Si no está marcado, setInputValue(inputValue) se ejecutará inmediatamente }
Primero, introduzcamos la startTransition más simple.
Mediante demostración y comparación,
este es un escenario de simulación de visualización de resultados de búsqueda después de ingresar caracteres. Al falsificar una gran cantidad de resultados de búsqueda, simula una situación. que es propenso a congelarse.
Intentamos ingresar continuamente 123, monitorear el cambio del value
del cuadro de búsqueda (actualización urgente) y el cambio del valor de búsqueda searchVal
(actualización de transición) y enviarlo a la barra de control.
importar React, {useEffect, useState, startTransition} desde 'react'; importar './App.css' const Resultado de la búsqueda = (accesorios) => { const lista de resultados = props.query ? Array.from({ longitud: 10000 }, (_, índice) => ({ identificación: índice, palabra clave: `${props.query} -- resultados de búsqueda${index}`, })): []; devolver resultList.map(({ id, palabra clave }) => ( <li clave={id}>{palabra clave}</li> )) } aplicación constante = () => { const [tipo, setTpye] = useState(1) const [valor, setValue] = useState(''); const [searchVal, setSearchVal] = useState('-'); utilizarEfecto(() => { // Supervisar los cambios en el valor de búsqueda console.log('Respuesta a la actualización del valor de búsqueda++++++' + searchVal + '++++++++++++') }, [valorbúsqueda]) utilizarEfecto(() => { console.log('Respuesta a la actualización del valor del cuadro de entrada-----' + valor + '-------------') si (escriba === 1) { setSearchVal(valor || '-') } si (escriba === 2) { iniciarTransición(() => { setSearchVal(valor || '-') }) } }, [valor, tipo]); devolver ( <div className='Aplicación'> <valor de entrada={valor} 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> <Consulta SearchResult={searchVal}></SearchResult> </ul> </div> ); };
en modo normal
如图所示:
se ingresan 123 caracteres continuamente Cuando se ingresa el primer carácter, el valor de búsqueda responde inmediatamente y la representación de la lista comienza inmediatamente, lo que hace que el cuadro de entrada se congele y deje de responder a la entrada del usuario. continúe respondiendo hasta que se complete la representación.
Después de usar startTransition
如图所示:
ingrese continuamente los caracteres 123, el cuadro de entrada continúa respondiendo y la respuesta al valor de búsqueda se retrasa para garantizar la respuesta de la página. No comienza a responder al valor de búsqueda hasta el final de la entrada, lo que representa el. resultados de búsqueda y mantener la página responsiva.
4. useTransiton
introducción al uso de useTransiton
importar {useTransiton} de 'react' const [está pendiente, iniciarTransición] = useTransiton({timeoutMs: 2000}) // Por ejemplo, en el estado pendiente, puedes mostrar un Spinner { isPending ? < Spinner /> : null }
startTransition
es una función que acepta una devolución de llamada y se utiliza para informar a React del estado que debe retrasarse.isPending
es un valor booleano, que es la forma en que reaccionar nos dice si debemos esperar a que se complete la transición.useTransition
acepta el valor de una respuesta retrasada con timeoutMs
. Si no se completa dentro del timeoutMs dado, forzará la actualización del estado en la función de devolución de llamada startTransition
.Análisis simple de useTransiton
Entendemos useTransition
a través de pseudocódigo.
función usarTransición(){ const [estáPendiente, setPending] = mountState(false); inicio constante = (devolución de llamada) => { setPending(verdadero); // Scheduler.unstable_next A través del modo de transición, la función de devolución de llamada de ejecución de programación de baja prioridad // puede reducir la prioridad de las actualizaciones. Si la actualización activada en la devolución de llamada tiene una prioridad más baja, // Se configurará como una actualización de alta prioridad o, cuando la transacción actual esté ocupada, se programará para que se aplique en el próximo período de inactividad. Programador.unstable_next(() => { const prevTransition = ReactCurrentBatchConfig.transition; ReactCurrentBatchConfig.transition = 1; intentar { setPending(falso); //Ejecutar la función de devolución de llamada callback(); } finalmente { ReactCurrentBatchConfig.transition = prevTransition; } }) } retorno [está pendiente, inicio]; }
Durante la ejecución de startTransition
, setPending se activará dos veces, una antes de transition=1
y otra después. setPending(true)
cuando se llama startTransition
, y transiton
actualiza setPending(false)
cuando se ejecuta la función de devolución de llamada dentro de startTransition
. React puede captar con precisión el tiempo de transición de espera en función de los cambios en el valor pendiente y usarlo para determinar si se ha excedido timeoutMs
(si se pasa alguno) para forzar una actualización.
5. useDeferredValue
introducción al uso de useDeferredValue
const [valor, setValue] = useState('') // El valor defferedValue se retrasa después de la actualización del estado const deferredValue = useDeferredValue(value, {timeoutMs: 2000})
timeoutMs
.一段逻辑
, mientras que useDeferred genera一个新状态
.Uso de useDeferredValue
import React, { useEffect, useState, useTransition, useDeferredValue } de 'react'; importar './App.css' const Resultado de la búsqueda = (accesorios) => { const lista de resultados = props.query ? Array.from({ longitud: 10000 }, (_, índice) => ({ identificación: índice, palabra clave: `${props.query} -- resultados de búsqueda${index}`, })): []; devolver resultList.map(({ id, palabra clave }) => ( <li clave={id}>{palabra clave}</li> )) } aplicación constante = () => { const [valor, setValue] = useState(''); const searchValue = useDeferredValue(valor, {timeoutMs: 2000}); utilizarEfecto(() => { console.log('Respuesta al valor del cuadro de entrada--------' + valor + '---------------') }, [valor]) utilizarEfecto(() => { // Supervisar los cambios en el valor de búsqueda console.log('Actualizar respuesta al valor de búsqueda++++++' + searchValue + '++++++++++++') }, [valor de búsqueda]) devolver ( <div className='Aplicación'> <valor de entrada={valor} onChange={e => setValue(e.target.value)} /> <div className={`type_button type_button_checked`}>useDeferredValue</div> <ul> <Consulta de resultado de búsqueda={valor de búsqueda}></Resultado de búsqueda> </ul> </div> ); };
Análisis simple de useDeferredValue
Entendemos useDeferredValue
a través de pseudocódigo.
función utilizarDeferredValue(valor){ const [prevValue, setValue] = updateState(valor); actualizarEfecto(() => { // Actualiza el valor a través del modo de transición en useEffect. Programador.unstable_next(() => { const prevTransition = ReactCurrentBatchConfig.transition; ReactCurrentBatchConfig.transition = 1; intentar { establecerValor(valor); } finalmente { ReactCurrentBatchConfig.transition = prevTransition; } }) }, [valor]); devolver valor anterior; }
useDeferredValue
escucha los cambios en el valor entrante a través de useEffect y luego realiza el cambio de valor a través de la tarea de transición. Esto保证defrredValue的更新滞后于setState
y se ajuste al principio de actualización de transición porque se ejecuta a través del mecanismo de programación de transición.