J'ai app.js fichier écrit en composant de classe mais je veux le modifier en composant fonctionnel. Depuis, je suis habitué à la classe et au nouveau composant fonctionnel. Toute suggestion très appréciée ... Merci d'avance
ci-dessous est mon fichier APP.js Je veux que cela puisse convertir en composant fonctionnel ... S'il vous plaît aider
3 Réponses :
Je ne ferai pas votre travail, mais je suis content de pouvoir vous expliquer la différence entre une étate (classe) et un apatride (fonction / fonctionnelle / quoi que vous souhaitez l'appeler, mais aucun état).
Le composant étatique a un état et est également utilisé comme conteneur. Par exemple, vous pouvez avoir un pagecontainer où vous établissez un appel AJAX dans ComponentDidMount pour récupérer des informations.
Le composant apatride n'est qu'un composant UI, n'a aucun effet secondaire. Jamais. Ainsi, par exemple, vous aurez un composant Maintenant, vous pouvez utiliser des crochets qui sont un mélange de ces deux: ils comprennent l'état dans des composants fonctionnels. Vous pouvez lire beaucoup de documentation dans réagissant docs.
Tout d'abord, je vais appeler un comportement extrêmement inutile de @marzelin. Vous devriez avoir honte, il n'ya absolument pas besoin d'être pédants à ce sujet s'appelle une fonction Deuxièmement, pour répondre à votre question et sans le Snark supplémentaire, vous devriez vraiment lire le Docs . Pour résumer, votre implémentation actuelle que vous n'avez peut-être pas convertie en une composante Fonction (AL) principalement parce qu'elle a un état. Pourquoi? Un composant Fonction (AL) est exactement que, c'est juste une fonction, et les fonctions ne peuvent pas avoir d'état, car c'est une chose de réaction, pas une chose javascript globale. C'est également la raison pour laquelle les composants de la fonction (AL) sont appelés Composants apatrides . L'utilisation principale de ces composants est d'être pure et de renvoyer la même sortie compte tenu de la même entrée. fonction VS composant . Si vous «composant de fonction» Google, vous obtenez littéralement les résultats de personnes qui l'appellent «composants fonctionnels», car cela signifie la même chose, il n'y a pas de différence, et vous êtes simplement méchant.
Ignorer mon deuxième paragraphe, useeffect est une chose
const App = () => {
const [isLoading, setIsLoading] = useState(true);
const [weather, setWeather] = useState();
const [error, setError] = useState();
const [city, setCity] = useState();
const [country, setCountry] = useState();
useEffect(async () => {
const result = await axios(
"https://hn.algolia.com/api/v1/search?query=redux"
);
setData(result.data);
const api_call3 = await fetch(
`https://api.weatherbit.io/v2.0/forecast/daily` +
`?city=${city},${country}&days=5&key=${API_KEY3}`
);
const data3 = await api_call3.json();
setWeather({
temperature: data4.data[0].temp,
city: data4.data[0].city_name,
country: data4.data[0].country_code,
humidity: data4.data[0].rh,
wind: data4.data[0].wind_spd,
description: data4.data[0].weather.description,
forecastdays: data3.data
});
setIsLoading(false);
});
return null;
};
This might help you get started
Pour commencer, c'est
composant de fonction noncomposant fonctionnelJe suggère de lire les documents officiels. Ils sont très bons.
Ohh désolé ... Composant de la fonction
Il en va de même pour apprendre à faire des choses, comment résoudre un problème; Si vous voulez faire avancer les choses, engagez un pigiste.