React 中的 console.log()

console.log() 是開發人員除錯程式碼的首選方法。它用於在控制檯上記錄 JavaScript 值。React 不限制使用 console.log() 方法，但由於其特殊的 JSX 語法，有一些規則需要遵守。

控制檯物件

console 物件帶有一個包含數十種除錯方法的介面。你可以在 official MDN 頁面上找到確切的方法列表。本文將重點介紹最流行的方法 - console.log()，並探討如何充分利用它。

登入 React

在 React 中，有很多方法可以 console.log() 一個值。如果你想在每次元件重新渲染時繼續記錄一個值，你應該將 console.log() 方法放在 render() 呼叫下。下面是這個實現的樣子。

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

每次我們在文字 <input> 元素中輸入一個新值時，狀態都會改變，這將觸發元件重新渲染。每次這樣做時，它都會將指定的文字記錄到控制檯。

如果你只想 console.log() 一個值一次，你可以使用 React 類元件的生命週期方法。下面是實際程式碼的樣子：

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

除錯應用程式後，請確保在退出開發模式之前刪除 console.log() 的所有例項。console.log() 語句不會向生產模式新增任何內容，因此應將其刪除。

定製

React 開發人員可以自定義常規 console.log() 方法的樣式。例如，如果你想為需要注意的任務建立一條特殊的訊息，你可以基於 console.log() 的核心功能建立一個自定義的 console.attention 方法。

如果你在應用程式的任何位置新增此定義並使用 message 引數呼叫 console.important() 方法，你將看到你的控制檯將顯示一條彩色訊息。

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

這是彩色控制檯訊息的示例：