React 中的 console.log()

Irakli Tchigladze 2022年5月18日
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')
}

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

React 控制檯日誌示例

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn