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')
}
這是彩色控制檯訊息的示例:
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