Encontré algo como esto en nuestra base de código el otro día y sentí curiosidad. ¿Cuál es la diferencia, si la hay, entre estos métodos para llamar a una función (que devuelve JSX) en el método de retorno de un componente React?
A.)
const TestXYZ = () => { const TestFunc = () => { return <div>This is some sample text</div>; }; return ( <> <TestFunc /> </> ); };B.)
const TestXYZ = () => { const TestFunc = () => { return <div>This is some sample text</div>; }; return <>{TestFunc()}</>; };¡Gracias por tu ayuda!
Este formulario tiene importantes limitaciones:
<>{TestFunc()}</>En primer lugar, no puede generar componentes basados en clases, solo componentes funcionales.
Pero el mayor problema es que el renderizado no ocurre en el contexto de su jerarquía de vistas. Eso significa que no hay ganchos ni acceso al contexto.
Para obtener crédito adicional, desazúquemos esa sintaxis.
<TestFunc />Transpila a:
React.createElement(TestFunc, null)));Esto dice "React, aquí hay un componente, por favor renderízalo para mí". Observe cómo pasamos el componente, pero no lo llamamos. Dejamos que React haga eso por nosotros.
Y:
<>{TestFunc()}</>;Transpila a:
React.createElement(React.Fragment, null, TestFunc());Esto dice "React, aquí hay algo de JSX que obtuve de una función, muéstralo". No cómo ejecutamos la función nosotros mismos y solo proporcionamos el resultado a React.
En un caso, su componente se representa en el contexto de su aplicación con acceso a todas las ventajas que ofrece, y en el otro caso, no.