console.log() in React

console.log() ist die Go-to-Methode der Entwickler zum Debuggen ihres Codes. Es wird verwendet, um JavaScript-Werte in der Konsole zu protokollieren. React schränkt die Verwendung der Methode console.log() nicht ein, aber aufgrund seiner speziellen JSX-Syntax gibt es Regeln, die befolgt werden müssen.

React console-Objekt

Das Objekt console enthält eine Schnittstelle, die Dutzende von Debugging-Methoden enthält. Die genaue Methodenliste finden Sie auf der Seite offizielle MDN. Dieser Artikel konzentriert sich auf die beliebteste Methode - console.log() und untersucht, wie man sie am besten nutzt.

Logging in React

Es gibt zahlreiche Möglichkeiten, einen Wert in React zu console.log(). Wenn Sie jedes Mal, wenn die Komponente erneut rendert, einen Wert mitprotokollieren möchten, sollten Sie die Methode console.log() unter den Aufruf von render() stellen. So würde diese Implementierung aussehen.

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>;
  }
}

Jedes Mal, wenn wir einen neuen Wert in das Textelement <input> eingeben, ändert sich der Status, wodurch die Komponente erneut gerendert wird. Jedes Mal, wenn dies der Fall ist, wird der angegebene Text in der Konsole protokolliert.

Wenn Sie einen Wert nur einmal console.log() haben möchten, können Sie Lifecycle-Methoden von React-Klassenkomponenten verwenden. So würde der eigentliche Code aussehen:

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>;
  }
}

Stellen Sie nach dem Debuggen Ihrer App sicher, dass Sie alle Instanzen von console.log() löschen, bevor Sie den Entwicklungsmodus verlassen. console.log()-Anweisungen fügen dem Produktionsmodus nichts hinzu und sollten daher entfernt werden.

Anpassung

React-Entwickler können den Stil der regulären Methode console.log() anpassen. Wenn Sie beispielsweise eine spezielle Nachricht für Aufgaben erstellen möchten, die Aufmerksamkeit erfordern, können Sie eine benutzerdefinierte Methode console.attention basierend auf der Kernfunktionalität von console.log() erstellen.

Wenn Sie diese Definition irgendwo in Ihrer App hinzufügen und die Methode console.important() mit dem Message-Argument aufrufen, sehen Sie, dass Ihre Konsole eine farbige Meldung enthält.

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

Hier ist ein Beispiel für eine farbige Konsolennachricht: