0
176
Visualizações¿Puedes reutilizar elementos de React en diferentes renders y contextos?
Tengo un componente como este:
const Foo = () => ( <div> <h1>Hello world!</h1> </div> )Tenga en cuenta que no necesita accesorios; devuelve el mismo JSX en cada render
¿Podría usarse esto como una constante en lugar de una función?
const Foo = ( <div> <h1>Hello world!</h1> </div> ) ¿O React tendrá problemas para reutilizar exactamente el mismo resultado de React.createElement() en re-renderizaciones y, más probablemente, en diferentes contextos DOM en toda la aplicación?
const OtherComponent = ({ ... }) => ( <div> {Foo} {...} </div> ) const OtherOtherComponent = ({ ... }) => ( <span> {Foo} </span> )EDITAR: Se me pasó por la cabeza que cualquier gancho que se llame dentro de los componentes secundarios probablemente se estropeará con esto, por lo que probablemente sea una mala idea.
EDICIÓN 2: ignore la primera "EDICIÓN"; Lo probé y me sorprendió descubrir que un gancho enterrado debajo del nodo de reacción const en realidad se llama varias veces. Me inclino a pensar que esto es realmente seguro, pero aún me gustaría la confirmación de alguien más familiarizado con las partes internas de React.
2 Respostas
Responde à pergunta0
Claro que puede usar el jsx asignado a una variable, si no hay cosas complejas. Ref: para reconocer
Actualizado con el POC: 
0
Esto es solo javascript. En el primer caso, crea un objeto cuya referencia no cambia si sigue usándolo una y otra vez.
En el otro caso, es una función y cada vez que se invoca, se devuelve una nueva instancia/objeto.
Una demostración de lo mismo,
const Comp1 = <div>Comp 1</div>; const Comp2 = () => { console.log('rendering comp 2' + Math.random()); return <div>Comp 2</div>; }; export default function App() { const obj1 = Comp1; const obj2 = Comp1; const obj3 = Comp1; console.log(Object.is(obj1, Comp1)); console.log(Object.is(obj1, obj2)); console.log(Object.is(obj2, Comp1)); console.log(Object.is(obj2, obj3)); return ( <div> {obj1} {obj2} {obj3} <Comp2/> <Comp2/> <Comp2/> </div> ); }