Guía de optimización del rendimiento de las reacciones
El objetivo de la optimización del rendimiento de carga es permitir a los usuarios ver la interfaz e interactuar antes con la aplicación. El objetivo de la optimización del rendimiento en tiempo de ejecución es reducir la congestión y hacer que las interacciones sean más fluidas.
Sabemos que setState de React activará diferencias y actualizaciones. El valor predeterminado es comparar todo el árbol de componentes, pero en muchos casos la diferencia es innecesaria porque los accesorios de un componente secundario no han cambiado, por lo que no es necesario que la diferencia funcione.
Para evitar este trabajo de diferenciación redundante en subcomponentes que no han cambiado las propiedades, React proporciona el enlace del ciclo de vida mustComponentUpdate (siguiente propiedad, siguiente estado). Si este enlace del ciclo de vida devuelve verdadero, realizará las tareas de renderizado y diferenciación a continuación. Si devuelve falso, React no continuará. Los usuarios pueden comparar el estado y los accesorios en este enlace de ciclo de vida para determinar si es necesario actualizarlo. Por lo general, los valores de propiedad de los accesorios actuales y nextProps de un componente son los mismos, y los valores de propiedad de estado también son los mismos y no es necesario actualizarlos.
Reacciona. PureComponent implementa el método shouldComponentUpdate y PureComponent utiliza una comparación superficial.
Sitio web de cepillado de preguntas de entrevista frontal: Lingqianbao recopila preguntas de entrevistas reales de grandes empresas y analiza en detalle puntos de conocimiento relevantes.
Correspondiente al PureComponent de los componentes de clase, los componentes de función tienen el método React.memo para lograr efectos similares.
React.Memo
Porque el PureComponent y el memo predeterminados son comparaciones superficiales utilizadas de forma predeterminada. Por lo tanto, si el nivel del objeto es muy profundo, se perderán actualizaciones.
La solución es, si el objeto cambia, recrear un objeto, si el arreglo cambia, recrear un arreglo, desestructurando la asignación, es fácil de implementar: {...datos antiguos}; [...oldArr] .
Los usuarios pueden implementar shouldComponentUpdate para personalizar la lógica de comparación. Para componentes funcionales, la lógica de comparación se puede definir mediante el segundo parámetro de React.memo.
Si desea juzgar con precisión la diferencia, además del juicio manual, existe una forma altamente automatizada: datos inmutables, y luego una implementación JS de datos inmutables: immutable-js.
Solo los nodos modificados crearán nuevas referencias, por lo que los componentes correspondientes realizarán renderizado y diferenciación.
Conclusión: La mejor práctica es componente/reacción pura con datos inmutables.
Los fragmentos pueden evitar nodos DOM innecesarios.
Las expresiones de etiquetas JSX requieren un nodo raíz.
Si solo desea que la expresión devuelva una lista de etiquetas, no debe agregar el nodo raíz a la capa más externa, sino usar Fragment.
También se puede abreviar.
Al registrar devoluciones de llamadas de eventos, no utilice funciones anónimas ni se vincule para generar nuevas funciones. En su lugar, utilice funciones de flecha o enlace en el constructor, preferiblemente en el constructor (ya que la herencia es posible).
Cuando necesitamos registrar una devolución de llamada de evento, podemos escribir así:
o
No se recomiendan las dos anteriores: funciones anónimas y expresiones vinculantes. Debido a que el método de escritura de función anónima creará una nueva función cada vez que se llame a render, y la expresión vinculante también creará una nueva función cada vez que se llame, cuando React haga diferencias, la función anterior se liberará (también se creará GC). activado) y se vincularán nuevas funciones.
Así que lo mejor es hacer esto.
O
Se recomienda lo último, porque sabemos:
Prueba de clase { log = () = gt {} } y prueba de clase { log; ( ) {}}
La diferencia entre estos dos métodos de escritura es que el primer registro es un método de instancia de la clase y el segundo es un método prototipo. Por lo tanto, el enlace en el constructor permite que otros componentes que heredan Test utilizando el método de herencia prototípico hereden del método de registro.
Si utiliza componentes funcionales, debe utilizar el gancho useCallback. Para conocer el uso de useCallback, consulte el artículo React Advanced en la base de conocimientos.
Porque React necesita analizar el objeto de estilo en una cadena de estilo CSS al analizar JSX. Se recomienda más utilizar CSS para escribir estilos.
Si setState se ejecuta en el método de renderizado, puede hacer que funcione la diferenciación cíclica.
Deje que la rama condicional solo contenga elementos que deban cambiarse, y no elementos que no necesiten cambiarse, para evitar operaciones innecesarias en subnodos de diferencias y nodos de actualización, lo que consume rendimiento.
Ejemplo:
Debería escribirse así:
Sabemos que Vue tiene la capacidad de calcular atributos, calcular los datos que nos interesan en función de los dependientes. datos y tiene capacidad de caché: si el valor de dependencia no cambia, no se requiere ningún cálculo y el resultado se devuelve directamente.
Si React quiere calcular los datos que nos interesan en función de los datos de dependencia, el método es muy simple.
Sin embargo, esta implementación no tiene la capacidad de almacenar en caché los valores, lo que afectará el rendimiento cuando los cálculos tomen mucho tiempo.
¿Cómo implementar la capacidad de almacenar valores en caché?
Puedes utilizar la biblioteca memorial-one:/package/memorial-one.
Si usas componentes funcionales, puedes usar useMemo para implementarlo. Con respecto al uso de la biblioteca useMemo, consulte el artículo React Advanced en este folleto.
React-Virtualización
Cuando el modo de concurrencia está habilitado, React utilizará renderizado interrumpible, de modo que los cálculos de diferencias a gran escala no afectarán el renderizado de la interfaz y garantizarán la fluidez del renderizado. e interacción.
El uso de componentes suspendidos puede proporcionar una mejor experiencia de carga de conmutación al cargar componentes locales.
Para obtener una introducción detallada a la concurrencia, lea los artículos sobre el modo de concurrencia de esta serie.
Si no usa una clave o usa un índice como clave, cuando la lista cambia, React no puede distinguir la correspondencia entre los elementos anteriores y siguientes, y solo puede atravesar, comparar y actualizar atributos, que puede provocar operaciones redundantes y pérdida de rendimiento.
¿Por qué necesitas una llave? Escribiré un artículo aparte para explicarlo en detalle.
React proporciona oficialmente una herramienta de prueba de rendimiento: react-addons-perf.
Esta herramienta puede imprimir el tiempo dedicado a cada componente al renderizar una aplicación React para analizar el desperdicio de rendimiento.
Uno de los métodos más importantes es printWasted(), que puede imprimir operaciones de renderizado sin actualizar el componente. Si descubre que su componente tarda mucho en renderizarse y diferenciarse, pero la vista del componente en realidad no cambia, debe considerar si es necesario introducir PureComponent para optimizar el rendimiento de renderizado.