Bastante nuevo para reaccionar aquí. Hasta ahora, solo he estado usando componentes que no toman argumentos ni apoyos. Luego, siempre renderizo el componente usando la forma <SomeComponent {...props}/>
Sin embargo, me encontré con una situación en la que ni siquiera me di cuenta de que algunas de las funciones que estaba creando eran en realidad componentes funcionales, ya que devolvían JSX. Sin embargo, eran visiblemente diferentes de la forma en que estoy acostumbrado a hacer y usar componentes. Se veía algo como esto:
const MoneyExample = (category, amount) => { if (typeof amount !== "number" || typeof category !== "string") { return; } return ( formatter.format(amount) !== "$0" && ( <> <h4>{category.charAt(0).toUpperCase() + category.slice(1)}</h4> <p>{formatter.format(amount)}</p> </> ) ); };y luego renderizarlo dentro de otro componente usando así
{MoneyExample("Budget", someAmount)}en lugar de la forma más común
<MoneyExample budget={"Budget"} amount={someAmount} />He intentado buscar información, pero ni siquiera estoy seguro de cómo formular la pregunta. ¿Este tipo de cosas van en contra de los principios de React o están completamente bien? ¿Hay otras consideraciones o diferencias notables entre estos dos? Lo siento si esto es obvio para algunos.
{MoneyExample("Budget", someAmount)} Cuando hace esto, MoneyExample no se utiliza como componente. Se está utilizando como una función auxiliar. El código dentro MoneyExamples se ejecuta inmediatamente y luego se usa su valor devuelto. Por el contrario, la versión <MoneyExample le dice a reaccionar que desea un MoneyExample con ciertos accesorios, pero MoneyExample en realidad no se llama todavía (por lo general, se llama muy poco después)
En casos muy simples, esto funcionará bien, pero tan pronto como agregue ganchos, comenzará a tener problemas. Por lo que reacciona, esos ganchos son parte del componente que llama a MoneyExample , no parte de MoneyExample en sí. Por lo tanto, se obligará a obedecer las reglas de los ganchos, lo que significa que MoneyExample debe llamarse exactamente la misma cantidad de veces en cada render.
Además, hacerlo de esta manera también significa que no puede usar React.memo para omitir el procesamiento. La función siempre debe ejecutarse, incluso si nada cambió.
En resumen: le recomiendo que se limite a crear componentes que acepten accesorios y luego cree elementos usando la sintaxis JSX.
const MoneyExample = ({ category, amount }) => { // ... } <MoneyExample budget={"Budget"} amount={someAmount} />no puede simplemente devolver, pero puede devolver null .
const MoneyExample = ({category, amount}) => { if (typeof amount === "number" || typeof category === "string") { const value = formatter.format(amount); if(value !== "$0") { return ( <> <h4>{category.charAt(0).toUpperCase() + category.slice(1)}</h4> <p>{value}</p> </> ); } } return null; };y debes usar:
<MoneyExample budget={"Budget"} amount={someAmount} />
la función include via puede tener un comportamiento extraño al volver a renderizar los componentes.