Quería saber la diferencia entre <React.Fragment> versus <> en términos de eficiencia.
Creo que es casi lo mismo, con la principal diferencia:
Puede usar <></> de la misma manera que usaría cualquier otro elemento, excepto que no admite claves ni atributos.
Sobre la eficiencia, en mi humilde opinión, no debería haber diferencia, al menos no está documentado.
Aquí hay un breve experimento, usar Test1 o Test2 dentro de Main da más o menos el mismo rendimiento, si verifica usando React Profiler:
let array = [...new Array(1000)]; let Test1 = (props) => { return ( <> <div>a</div> <div>b</div> <div>b</div> </> ); }; let Test2 = (props) => { return ( <React.Fragment> <div>a</div> <div>b</div> <div>b</div> </React.Fragment> ); }; let Main = (props) => { return ( <div> {array.map((x) => ( <Test2 /> ))} </div> ); }; export default function App() { return ( <div> <Main /> </div> ); }Es la misma cosa. El <> es solo una sintaxis breve .
La sintaxis <></> es una abreviatura de <React.Fragmet> con una pequeña diferencia. no puede pasar clave o atributos a <>
someArray.map(item => ( // Without the `key`, React will fire a key warning <React.Fragment key={item.id}> <dt>{item.term}</dt> <dd>{item.description}</dd> </React.Fragment> )) El ejemplo anterior no es posible con <>
Consulte los documentos de reacción para obtener más información.