Así que entiendo lo que está pasando, pero tampoco entiendo lo que está pasando. Lo que quiero decir es esto, obtuve el código a continuación (ver el código a continuación) del sitio web de reacción y estoy pasando por el proceso de comprensión de reacción y cómo usarlo correctamente. Entonces mi pregunta es esta, ¿por qué las variables "firstName" y "lastName" están declaradas fuera del alcance de la función en la que se utilizarán? ¿No sería más fácil declarar las variables en el ámbito mismo de la función?
function formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Harper', lastName: 'Perez' }; const element = ( <h1> Hello, {formatName(user)}! </h1> );Veo dos posibilidades:
formatName es una función auxiliar que potencialmente se llama varias veces, con diferentes datos. Si ese es el caso, entonces no puede definir los datos dentro de la función, ya que serán diferentes cada vez. Si este es el escenario en el que nos encontramos, entonces creo que el código que mostraste tiene sentido.
formatName se llama exactamente una vez, por lo que los datos son siempre los mismos. En ese caso, estoy de acuerdo en que podrías poner los datos dentro de la función. Pero en ese momento, también podría eliminar la función y calcular el nombre formateado en línea. Mantenerlo como una función de un solo uso solo sería útil si ayuda con la legibilidad.
Cuando la variable de user se declara fuera de la función, los datos se pueden cambiar en otro lugar y la función no necesita saber cómo obtener los datos, solo necesita saber los valores de los datos.
como sé, si declaramos una función/variable dentro del componente de la función, creará una nueva función/objeto cada renderizado, digamos que usamos un componente dentro del proceso de bucle, afectará la memoria del navegador del usuario. así que crear una función que haga algo fuera del componente de la función es la mejor práctica.