Cómo evitar volver a renderizar en React
Podemos almacenar cualquier tipo de datos en los accesorios y el estado de un componente de React y controlar el estado de todo el componente cambiando los accesorios y el estado. React vuelve a renderizar todo el componente cuando cambian los accesorios y el estado. El proceso de volver a renderizar un componente se puede simplificar de la siguiente manera:
La comprensión del traductor sobre diff es que para un componente con accesorios modificados, diff calculará automáticamente la diferencia en el árbol DOM interno del componente y luego compárelo con los nodos DOM modificados reales, se comparan y se representan las partes modificadas. Luego, después de la comparación, encuentra el nodo DOM que realmente cambió y representa las partes modificadas. Esto es un malentendido, el algoritmo diff solo se usa para calcular componentes/nodos virtuales cuyo estado o accesorios han cambiado, y se volverá a representar sin importar cuán grande sea el componente/nodo virtual.
Supongamos que un componente ha completado la renderización, como se muestra en la siguiente figura:
A continuación, debido a que el estado ha cambiado, es necesario volver a renderizar el nodo verde en la siguiente figura. , como se muestra en la siguiente figura:
La idea general es que solo necesitas actualizar los tres nodos verdes a continuación para actualizar el componente
¡Pero! Siempre que cambien los accesorios o el estado de un componente, se volverá a renderizar todo el componente, por lo que, excepto los tres nodos verdes de arriba, será necesario volver a renderizar todos los nodos amarillos
Esto será un gran desperdicio de rendimiento, porque A excepción de los tres nodos que deben representarse, no es necesario representar ningún otro nodo. Para páginas complejas, esto puede resultar en una experiencia general de página muy pobre. Por lo tanto, para mejorar el rendimiento de sus componentes, debe hacer todo lo posible para reducir el renderizado innecesario.
shouldComponentUpdate
La función deberíaComponentUpdate se llama antes de volver a renderizar el componente, y el valor de retorno de esta función determinará si es necesario volver a renderizar el componente. El valor de retorno predeterminado de esta función es verdadero, lo que significa que siempre que cambien los accesorios o el estado del componente, el DOM virtual se reconstruirá y comparará utilizando el algoritmo diff y luego, según el resultado de la comparación, se decidirá si Vuelva a renderizar todo el componente. Un valor de retorno falso significa que no es necesario volver a renderizar.
Esta función devuelve verdadero por defecto.
PureRenderMixin
React proporciona oficialmente el complemento PureRenderMixin, que permite que la función deberíaComponentUpdate devuelva falso cuando no es necesario. Puede reducir la repetición innecesaria, mejorando así el rendimiento hasta cierto punto, y se utiliza de la siguiente manera:
import PureRenderMixin from 'react-addons-pure-render-mixin'
Clase FooComponent extiende React.Component {
La clase FooComponent contiene un componente que se puede volver a renderizar cuando no es necesario.
Componente {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
render() {
return lt;div className={this.props.className}gt;foolt;/divgt;;;
}
}
Necesitamos anular mustComponentUpdate en el componente, que está definido en el código fuente de PureRenderMixin de PureRenderMixin. deberíaComponentUpdate se define de la siguiente manera
deberíaComponentUpdate(nextProps, nextState) {
Devuelve superficialCompare(this, nextProps, nextState);
}
El método anulado dentro de shouldComponentUpdate(nextProps, nextState) {
devuelve una comparación superficial entre el estado actual del componente y el siguiente estado del componente, devolviendo false si el estado del componente ha cambiado; luego devuelve verdadero
deberíaComponentUpdate(nextProps, nextState) {
¡devuelve! superficialEqual(this.props, nextProps) ||
!shallowEqual(this.state, nextState);
}
En la última versión de React, básico Clases como React.base no necesitan usar este complemento.
Nota del traductor: por lo tanto, si un componente más grande decide volver a renderizar, podemos vincular un nuevo método deberíaComponentUpdate en cada subcomponente, reduciendo así el número de renderizaciones de subcomponentes.
Podemos anular la función shouldComponentUpdate nosotros mismos para poder comparar cualquier cosa, es decir, una comparación profunda (comparando mediante recursividad capa por capa), lo que llevará mucho tiempo y generalmente no se recomienda para garantizar que El tiempo dedicado a la comparación es menor que el tiempo dedicado a volver a renderizar todo el componente. Al mismo tiempo, para minimizar el tiempo dedicado a la comparación, debemos intentar mantener los accesorios y los estados simples y no incluir propiedades innecesarias en el estado. , y no coloque propiedades en el estado que se pueda calcular a partir de otras propiedades.
Immutable.js
Los datos comparativamente complejos requieren mucho tiempo y pueden ser imposibles de implementar, y el uso de Immutable.js puede resolver este problema. El principio básico de Immutable.js es que se devuelve la misma referencia para los objetos que no cambian y se devuelven nuevas referencias para los objetos que han cambiado. Entonces, cuando haga una comparación de estados, simplemente use el siguiente código:
deberíaComponentUpdate() {
return ref1 ! == ref2
}
Además, también necesitamos anular el método shouldComponentUpdate en el componente secundario.
Componente puro
Se dice que un componente es puro si está relacionado solo con los accesorios y el estado, y genera el mismo resultado dados los mismos accesorios y estados. En otras palabras, los componentes puros sólo dependen de los accesorios y el estado del componente.
render() {
return (
lt; div style={{width: this.props.width}}gt;
{this.state.rows}
lt;/divgt;
);
}
Si los accesorios del componente secundario Son inmutables y los llamamos componentes sin estado. El uso del complemento pureRenderMixin en este componente garantiza que el valor de retorno de mustComponentUpdate siempre sea falso, por lo que es una buena idea separar los componentes puros de los componentes sin estado y anular el método mustComponentUpdate en los componentes sin estado.
key
Al escribir subcomponentes dinámicos, se informará una advertencia si la propiedad clave no se agrega al subelemento dinámico. La advertencia se refiere a que si cada componente secundario es una matriz o un iterador, entonces debe tener una propiedad clave única, entonces, ¿qué hace esta propiedad clave?
Imaginémonos si necesitamos presentar una lista clasificada de 5000 elementos y las clasificaciones se actualizan cada pocos segundos, la mayoría de las clasificaciones solo cambian sus posiciones y algunas de las clasificaciones luego se actualizan por completo. aquí es donde entra en juego la clave, es el puntal que identifica la unicidad actual. Ahora intenta describir la escena
[{<
sid: '10001',
nombre: 'sysuzhyupeng'
}, {
sid: '10008',
nombre: 'zhyupeng'
}, {
sid: '120000',
nombre: 'yupeng'
}]
donde sid es el número de la escuela, implementemos una lista de clasificación de puntajes
importar Reaccionar desde 'react' ;
función Rango({ lista }){
return (
lt; ulgt;
{list.map((entrada , índice)=gt (
lt; li key={index}gt; {entry.name}lt;/ligt;
))}
)
}
Establecemos la palabra clave en un número de serie, para que no se nos advierta, pero esto es un Enfoque muy ineficiente: las palabras clave se utilizan para las diferencias de Dom virtuales, mientras que lo que hicimos anteriormente es equivalente a usar una palabra clave aleatoria, y luego la actualización se volverá a representar independientemente de si el mismo elemento existe o no.
La forma correcta es muy sencilla, basta con sustituir el contenido de la clave por sid.
Entonces aquí hay otra pregunta: ¿qué representa React cuando las claves son las mismas? La respuesta es que solo mostrará el primer elemento con la misma clave y generará una advertencia.