在 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 中的注释。