在 React 中編寫註釋的多種方式

編寫有用的註釋是實現更高效編碼過程的關鍵之一。它們使維護、除錯和構建現有 Web 應用程式變得更加容易。一旦程式設計師完成了一個專案，他們就會轉移到不同的任務上，並忘記他們剛剛編寫的程式碼的細節。程式設計師可以使用註釋來描述他們的想法並解釋程式碼中最複雜的部分。註釋允許你稍後返回並輕鬆找出程式碼。如果你需要新增功能、除錯或構建現有程式碼，它們可以為你節省大量時間。

在理想情況下，React 元件應該非常簡單易懂，但情況並非總是如此。有時元件的目的和功能可能不清楚。編寫註釋可以讓你解釋一些困難的程式碼。

React 中的註釋 - JSX 語法

JSX 是一種類似於 HTML 的語法，以方便編寫 React 應用程式。它允許開發人員直觀地構建應用程式，而不是多次呼叫 React.createElement() 方法。編譯器負責將 JSX 程式碼翻譯成普通的 JavaScript。

React 元件由常規 JavaScript 和 JSX 組成。你可以為兩者編寫註釋，但是你必須做一些額外的工作才能在 JSX 中編寫註釋。React 的建立者決定不允許在 JSX 中使用常規的 JavaScript 註釋。他們也沒有計劃在未來為 JSX 新增單獨的註釋功能。

在常規 JavaScript 中，你可以使用常規語法來編寫註釋。以下是在 JSX 之外編寫註釋的方法：

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

儘管它與 HTML 非常相似，但在 JSX 中編寫註釋的語法與 HTML 不同。你不能使用 <!-- 和 --> 標記來標記註釋的開始和結束。

相反，你必須使用花括號，它允許你在 JSX 中編寫普通的 JavaScript 表示式。如果沒有大括號，JSX 中的註釋將被解析為常規文字。你可以在 JSX 中鍵入多行 JavaScript 註釋，只要它們寫在大括號之間即可。

下面是一個例子：

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

你也可以在多行上寫註釋，只要你移動結束標籤並且兩個標籤仍然在花括號之間。

在 JSX 中編寫單行註釋有點複雜。你不能寫類似 {//comment} 的東西，因為 // 標籤會自動註釋掉整行，包括右花括號。如果要新增單行註釋，請確保右花括號位於下一行。讓我們看一下這個例子：

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

這種語法可能有點令人困惑。大多數 React 開發人員堅持使用多行語法來清楚地劃分註釋的開始和結束。

如果你有興趣瞭解更多相關資訊，可以在 playcode 上探索 JSX 中的註釋。