Selon reactjs.org, componentWillMount ne sera plus pris en charge à l'avenir.
https://reactjs.org/docs/react-component.html#unsafe_componentwillmount
Il n'est pas nécessaire d'utiliser componentWillMount.
Si vous voulez faire quelque chose avant le montage du composant, faites-le simplement dans le constructeur ().
Si vous souhaitez faire des requêtes réseau, ne le faites pas dans componentWillMount. C'est parce que cela entraînera des bogues inattendus.
Les requêtes réseau peuvent être effectuées dans componentDidMount.
J'espère que ça aide.
mis à jour le 08/03/2019
La raison pour laquelle vous demandez componentWillMount est probablement parce que vous souhaitez initialiser l'état avant les rendus.
Faites-le simplement dans useState.
const helloWorld=()=>{
const [value,setValue]=useState(0) //initialize your state here
return <p>{value}</p>
}
export default helloWorld;
ou peut-être que vous souhaitez exécuter une fonction dans componentWillMount, par exemple, si votre code d'origine ressemble à ceci:
componentWillMount(){
console.log('componentWillMount')
}
avec hook, tout ce que vous avez à faire est de supprimer la méthode du cycle de vie:
const hookComponent=()=>{
console.log('componentWillMount')
return <p>you have transfered componeWillMount from class component into hook </p>
}
Je veux juste ajouter quelque chose à la première réponse sur useEffect.
useEffect(()=>{})
useEffect s'exécute sur chaque rendu, c'est une combinaison de componentDidUpdate, componentDidMount et ComponentWillUnmount.
useEffect(()=>{},[])
Si nous ajoutons un tableau vide dans useEffect, il s'exécute juste lorsque le composant est monté. C'est parce que useEffect comparera le tableau que vous lui avez passé. Il n'est donc pas nécessaire que ce soit un tableau vide, il peut s'agir d'un tableau qui ne change pas. Par exemple, il peut s'agir de [1,2,3] ou ['1,2']. useEffect ne fonctionne toujours que lorsque le composant est monté.
Cela dépend de vous si vous voulez qu'il s'exécute une seule fois ou après chaque rendu. Ce n'est pas dangereux si vous avez oublié d'ajouter un tableau tant que vous savez ce que vous faites.
J'ai créé un échantillon pour le crochet. Vérifie s'il te plaît.
https://codesandbox.io/s/kw6xj153wr
mis à jour le 21/08/2019
C'est un blanc depuis que j'ai écrit la réponse ci-dessus. Il y a quelque chose auquel je pense que vous devez prêter attention. Lorsque vous utilisez
useEffect(()=>{},[])
Lorsque react compare les valeurs que vous avez passées au tableau [], il utilise Object.is () pour comparer. Si vous lui passez un objet, tel que
useEffect(()=>{},[{name:'Tom'}])
C'est exactement la même chose que:
useEffect(()=>{})
Il sera à nouveau rendu à chaque fois car lorsque Object.is () compare un objet, il compare sa référence et non la valeur elle-même. Il en va de même pour la raison pour laquelle {} === {} renvoie false car leurs références sont différentes. Si vous souhaitez toujours comparer l'objet lui-même et non la référence, vous pouvez faire quelque chose comme ceci:
useEffect(()=>{},[JSON.stringify({name:'Tom'})])