Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Mi inglés es limitado, mis habilidades son mediocres y tengo mucho conocimiento. Como no soy traductor, hay muchas traducciones aleatorias. Si no me cree, lea el texto original ~~.

Direccion original:https://facebook.github.io/react/docs/rendimiento-avanzado.html

---

###Optimización del rendimiento

Siempre que los desarrolladores eligen usar reaccionar en un proyecto real, primero harán una pregunta: ¿Usar reaccionar hará que el proyecto sea más rápido, más flexible y más fácil de mantener? Además, ¿el proceso de volver a representar la interfaz cada vez que cambian los datos de estado provocará un cuello de botella en el rendimiento? Internamente, React garantiza el rendimiento mediante el uso de algunas técnicas sutiles para minimizar las costosas operaciones DOM que provocan actualizaciones de la interfaz de usuario cada vez.

####Evitar el efecto directo en DOM
React implementa una capa de DOM virtual, que se utiliza para mapear el árbol DOM nativo del navegador. A través de esta capa de DOM virtual, React puede evitar operar directamente el DOM, porque la velocidad de operar directamente el DOM del navegador es mucho menor que la de operar objetos JavaScript. Siempre que cambien las propiedades o el estado de un componente, reaccionar construirá un nuevo dom virtual en la memoria y lo comparará con el antiguo original para determinar si es necesario actualizar el árbol dom del navegador, optimizando así la representación del dom tanto como sea posible. posible pérdida de rendimiento.

Además de esto, reaccionar proporciona funciones del ciclo de vida de los componentes.shouldComponentUpdate, el componente llamará a esta función antes de decidir volver a renderizar (después de que se complete la comparación del DOM virtual y se genere el DOM final). Esta función le da al desarrollador la autoridad para volver a renderizar y la función regresa directamente de forma predeterminada.true, lo que indica que la actualización DOM se iniciará directamente de forma predeterminada:

shouldComponentUpdate: function(nextProps, nextState) {
	return true;
}

Vale la pena señalar que reaccionar llamará a esta función con mucha frecuencia, por lo que si planea implementar la lógica de esta función usted mismo, asegúrese del rendimiento tanto como sea posible.

Por ejemplo, tienes una aplicación de chat con múltiples publicaciones si solo una de ellas cambia en este momento, si implementas lo siguiente.shouldComponentUpdate, reaccionar evitará volver a renderizar aquellas publicaciones que no han cambiado según la situación:

shouldComponentUpdate: function(nextProps, nextState) {
	// TODO: return whether or not current chat thread is different to former one.
	// 根据实际情况判断当前帖子的状态是否和之前不同
}

En resumen, React evita en la medida de lo posible costosas operaciones DOM y permite a los desarrolladores interferir con este comportamiento.

####shouldComponentUpdate en acción
A continuación se muestra un ejemplo de un componente que contiene elementos secundarios, como se muestra a continuación:

Anterior Próximo