console.log() dans React

console.log() est la méthode de prédilection des développeurs pour déboguer leur code. Il est utilisé pour enregistrer les valeurs JavaScript sur la console. React ne limite pas l’utilisation de la méthode console.log(), mais en raison de sa syntaxe JSX spéciale, certaines règles doivent être suivies.

React Objet console

L’objet console est livré avec une interface qui contient des dizaines de méthodes de débogage. Vous pouvez trouver la liste exacte des méthodes sur la page officielle MDN. Cet article se concentrera sur la méthode la plus populaire - console.log() et examinera comment en tirer le meilleur parti.

Logging dans React

Il existe de nombreuses façons de console.log() une valeur dans React. Si vous souhaitez continuer à enregistrer une valeur à chaque fois que le composant effectue un nouveau rendu, vous devez placer la méthode console.log() sous l’appel render(). Voici à quoi ressemblerait cette implémentation.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  render() {
    console.log('I log every time the state is updated');
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

Chaque fois que nous entrons une nouvelle valeur dans l’élément de texte <input>, l’état changera, ce qui déclenchera le rendu du composant. Chaque fois qu’il le fait, il enregistrera le texte spécifié dans la console.

Si vous souhaitez console.log() une valeur une seule fois, vous pouvez utiliser les méthodes de cycle de vie des composants de la classe React. Voici à quoi ressemblerait le code réel :

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      input: ""
    }
  }
  componentDidMount(){
    console.log('I log only once');
  }
  render() {
    return <input type="text" onChange={(e) => this.setState({input: e.target.value})}></input>;
  }
}

Une fois que vous avez débogué votre application, assurez-vous de supprimer toutes les instances de console.log() avant de quitter le mode de développement. Les instructions console.log() n’ajoutent rien au mode de production, elles doivent donc être supprimées.

Personnalisation

Les développeurs React peuvent personnaliser le style de la méthode console.log() habituelle. Par exemple, si vous souhaitez créer un message spécial pour les tâches nécessitant une attention particulière, vous pouvez créer une méthode personnalisée console.attention basée sur la fonctionnalité principale de console.log().

Si vous ajoutez cette définition n’importe où dans votre application et appelez la méthode console.important() avec l’argument message, vous verrez que votre console aura un message coloré.

console.important = function(text) {
console.log('%c important message', 'color: #913831')
}

Voici un exemple de message de console coloré :