Una cosa que aprendí sobre React es que si los accesorios de un componente no cambian, entonces React no se molesta en volver a renderizar el componente. ¿Es eso cierto también para los componentes sin estado? ¿O se comportan más como funciones "estúpidas" y se ejecutan cada vez?
Por ejemplo, si tuviera:
import StatelessComponent from '../StatelessComponent'; export default class DocumentsTable extends React.Component { state = { something: 'foobar', }; render() { return ( <div> { this.state.something } <StatelessComponent theOnlyProp='baz'> </div> ) } }; Cuando this.state.something actualiza su valor, ¿se vuelve a representar <StatelessComponent> ? ¿O es lo suficientemente "inteligente" para ver que sus accesorios no cambiaron, como otros componentes de React?
Desde React 16.6, puede usar React.memo para componentes funcionales para evitar volver a renderizar, de manera similar a PureComponent para componentes de clase:
const MyComponent = React.memo((props) => { return ( /* markup */ ); });Además, memo hace optimización interna .
Y a diferencia de una implementación de componente de orden superior memo() de usuario, la integrada en React puede ser más eficiente al evitar una capa de componente adicional. Cita en bloque
Sí, siempre vuelven a renderizar 1 (a menos que use React.memo como se explicó anteriormente) si se llama a setState() en el componente mismo o en uno de sus padres, porque los componentes sin estado funcionales no llevan un shouldComponentUpdate . De hecho, cada componente de React se vuelve a renderizar 1 a menos que implementen shouldComponentUpdate .
Es importante tener en cuenta que llamar a render() no significa que los nodos DOM estén siendo manipulados de ninguna manera . El método de render solo sirve al algoritmo diff para decidir qué nodos DOM realmente deben adjuntarse/desconectarse. Tenga en cuenta que render() no es costoso, son las manipulaciones DOM las que son costosas . Se ejecutan solo si render() devuelve diferentes árboles virtuales.
De la documentación de React
Para que quede claro, volver a renderizar en este contexto significa llamar a renderizar todos los componentes, no significa que React los desmontará y volverá a montar. Sólo se aplicarán las diferencias siguiendo las reglas establecidas en los apartados anteriores.
Simplemente no se preocupe y deje que se llame a render() a menos que su componente sea enorme, entonces estará mejor con un Componente con estado que implemente shouldComponentUpdate() .
Mire aquí para una discusión interesante.
1 significa que se llama a la función render() del componente, no que se está manipulando el nodo DOM subyacente.
¿Se volverá a renderizar un componente sin estado si sus accesorios no han cambiado?
Sí. Se llamará a la función de representación sin estado incluso si nada ha cambiado. Sin embargo, React comparará en la fase de reconciliación el DOM virtual (generado por la función de representación) con el DOM existente. Esto está lejos de la tubería, por lo tanto, no es ideal si la función de representación fuera costosa de calcular.
Un componente Pure tiene una comparación superficial predeterminada de la propiedad y habría detenido la ejecución del renderizado. Vea el componente Pure como un componente React de clase normal que tiene un shouldComponentUpdate que se compara con un triple igual a las propiedades existentes y la nueva.
Dicho esto, puede envolver su componente sin estado en un componente puro usando Recompose.pure ( https://github.com/acdlite/recompose/blob/master/docs/API.md#pure ) que funcionará automáticamente, como el componente puro , una comparación superficial sin comprometer la sintaxis breve del componente sin estado .
import StatelessComponent from '../StatelessComponent'; const PureChildFromStatelessComponent = Recompose.pure(StatelessComponent); // ... <PureChildFromStatelessComponent ... />Ver reaccionar no solo se vuelve a renderizar solo si se cambian los accesorios, incluso se vuelve a renderizar si hay algún cambio de estado. En su caso, el componente se volverá a representar a medida que cambie su estado. La forma en que funciona la reacción se basa en un algoritmo llamado Reconciliación , lo que hace este algoritmo es que compara su DOM virtual con el DOM real y, si ve algún cambio, vuelve a representar su DOM real reemplazándolo con su DOM virtual para que cualquier cambio en el estado hará que se vuelva a renderizar todo el componente.