Hablando del mecanismo de carga de datos, un tema ineludible es el rendimiento del front-end. De hecho, la página de inicio de muchos portales de comercio electrónico realizará algunas personalizaciones y optimizaciones verticales, como permitir que la solicitud se cargue lo antes posible en el página, o precarga en la página anterior, etc. Con el lanzamiento de react18, el mecanismo de solicitud se ha discutido constantemente y se ha dado una dirección clara en el seguimiento.
Si hay tres componentes C1, C2 y C3 anidados en secuencia en nuestra página, y cada componente tiene una solicitud correspondiente F1, F2 y F3, por lo general, la mayoría de las personas usarán variables de efecto y estado para lograr la adquisición del flujo de datos, lo que significa que esto significa que la solicitud debe iniciarse cuando se carga el componente, y toda la adquisición de datos ocurre en el ciclo de vida del componente, como se muestra en la figura a continuación, podemos llamar a este método de obtención de datos en cascada, pero hay un problema con este método. , en este método, la adquisición de datos entre los componentes se realiza secuencialmente, lo que en realidad significa que se bloquean entre sí, y si la jerarquía del componente está profundamente anidada, la página tardará mucho en cargarse.
Para evitar este bloqueo secuencial de la adquisición de datos entre componentes, otro método es usar Promise.all para obtener todos los datos solicitados antes de que se cargue el componente, de modo que todos los datos se obtengan cuando se cargue el componente. Este método resuelve el problema del orden de carga de los componentes que bloquea la adquisición del flujo de datos de cada uno, pero también crea un nuevo problema, la página estará en blanco hasta que se complete la solicitud.
Basado en el segundo método de solicitar y luego renderizar, Suspense también se puede usar para paralelizar la solicitud y el renderizado. Suspense puede permitir que los componentes "esperen" a que finalicen ciertas operaciones antes de renderizar. Y si este método se va a utilizar en proyectos reales, también es necesario considerar dónde se escriben las solicitudes correspondientes de C1, C2 y C3. Si se escriben en componentes, la carga sigue siendo lenta. Si está dividido, debe considerar problemas de ingeniería, como la división de archivos y la división de códigos.
Después de analizar cuidadosamente los tres métodos anteriores, descubrí que cada uno tiene sus propias ventajas y desventajas. Al mismo tiempo, según el esquema anterior, también proporciono una idea de optimización de solicitudes. Primero, divida el JS solicitado por separado y escriba una solicitud de archivo. .js, en el encabezado html Introduzca request.js al principio y use el atributo asíncrono para permitir que el script se ejecute en paralelo (como se muestra en el código a continuación), lo que puede garantizar que nuestra solicitud se pueda emitir desde el principio, y no puede bloquear la ejecución del archivo js empaquetado por el código React posterior, que es una gran solicitud y el código de representación se ejecuta en paralelo.
// html头部引入request.js
<script async src="/js/request.js"></script>
Después de enviar la solicitud, los datos devueltos deben inyectarse en el componente React. ¿Cómo inyectar esta parte? Un ejemplo de código simple es el siguiente:
// request.js 中请求部分 evt是发布订阅模式的一个实例
window.InitData = {
data: null,
on: (msg, fn) => evt.on(msg, e => fn(e)),
emit: (msg, data) => evt.emit(msg, data),
};
fetch().then(rs => {
InitData.data = rs;
InitData.emit("init_data", rs);
return rs;
});
// index.js react代码逻辑
…….
useEffect(() => {
if (InitData.data !== null) {
// 这里已经获取到了请求的返回值
doSomething();
} else {
InitData.on("init_data", (data) => {
// 利用发布订阅模式获取到数据
doSomething();
});
}
}, []);
…….
La idea general es cargar primero el archivo de solicitud empaquetado por separado en html y agregar el atributo asíncrono para que el script se ejecute en paralelo, monte los datos devueltos en la ventana o use el modo de publicación-suscripción para inyectar los datos en el componente de reacción. En realidad, esto es similar al modo de representación durante la solicitud, utilizando solicitudes anticipadas para reducir el tiempo de carga. En el seguimiento, también esperamos resolver el mecanismo de solicitud de datos de forma ingenieril.
En el futuro, el desarrollo definitivamente estará más inclinado al modo de renderizado mientras se solicita. El sitio web oficial de React también menciona que planea permitir más escenarios en el futuro, incluida la obtención de datos, etc. El suspenso también es compatible con el React18 recientemente lanzado . La representación del lado del servidor, incluido el remix de código abierto reciente, también está optimizando el mecanismo de solicitud para que la aplicación se cargue más rápido. Los socios interesados también son bienvenidos a discutir y practicar juntos. Suspense 处理更
El sistema operativo Maya desarrollado por el Ministerio de Defensa de la India, que reemplaza por completo a Windows Redis 7.2.0, y el sitio web oficial de la versión 7-Zip de mayor alcance fue identificado como un sitio web malicioso por Baidu Go 2 nunca traerá cambios destructivos a Go 1 Xiaomi lanzó CyberDog 2, más del 80% de la tasa de código abierto ChatGPT costo diario de alrededor de 700,000 dólares estadounidenses, OpenAI puede estar al borde de la bancarrota Se incluirá el software de meditación, fundado por la "primera persona de Linux en China" Apache Doris versión 2.0.0 Lanzamiento oficial: rendimiento de prueba ciega 10 veces mejorado, experiencia de análisis extremadamente rápida más unificada y diversa La primera versión del kernel de Linux (v0.01) interpretación de código fuente abierto Chrome 116 se lanza oficialmenteAutor: JD Retail Liang Fengfeng
Fuente: Comunidad de desarrolladores de JD Cloud