JSX语法规则

JSX（JavaScript XML）是一种JavaScript的语法扩展，常用于React等库中描述用户界面。以下是JSX的主要语法规则：

1. 标签闭合

• JSX标签必须闭合，无论是自闭合标签还是包含子元素的标签。
• 例如，<div> 需要对应的 </div> 来闭合，而像 <img /> 或 <br /> 这样的自闭合标签则以斜杠 / 结尾。

2. 根标签

• JSX中只能有一个根元素。
• 如果需要渲染多个元素，可以将它们包裹在一个父元素中，如 <div>。

3. 表达式插值

• 在JSX中，可以将JavaScript表达式放在大括号 {} 中，以在渲染时插入动态内容。
• 这些表达式可以是变量、函数返回值、计算表达式等。

4. 语句与表达式的区别

• 注意区分JavaScript语句和表达式。表达式会返回一个值，而语句则不会。
• 在JSX中，只能嵌入表达式，不能嵌入语句（如 if 语句、for 循环等）。
• 如果需要在JSX中使用条件逻辑，可以使用三元运算符或逻辑与运算符 && 等表达式形式。

5. 类名

• 在JSX中，由于 class 是JavaScript的保留字，因此为元素添加类名时需要使用 className 属性。

6. 内联样式

• 为元素设置内联样式时，需要使用 style 属性，并传递一个包含CSS属性的JavaScript对象。
• CSS属性名需要使用驼峰命名法（camelCase），而不是短横线命名法（kebab-case）。

7. 注释

• 在JSX中，注释需要使用 {/* 注释内容 */} 的形式来包裹。这种注释方式不会出现在渲染后的DOM中。

8. 组件命名与引用

• 当使用JSX定义组件时，如果组件名以大写字母开头，React会将其视为一个组件并尝试渲染它；如果以小写字母开头，React则会将其视为一个HTML标签。
• 在JSX中引用组件时，需要确保组件已经被定义并且可以在当前作用域内被访问到。

9. 嵌套

• JSX元素可以相互嵌套，以构建复杂的UI结构。

10. 列表渲染

• 可以使用JavaScript数组的 map() 方法来遍历数组，并为每个元素生成对应的JSX元素，从而实现列表渲染。

11. 避免直接使用JavaScript语句

• JSX中不能直接使用JavaScript语句（如 if 语句、for 循环等）。如果需要执行复杂的逻辑，可以在渲染JSX之前先计算好需要渲染的内容。

12. 性能优化

• 在大型项目中，需要注意JSX的渲染性能。可以通过使用React的 React.memo、useMemo、useCallback 等Hook来优化组件的渲染性能。