什么是JSX、是如何使用以及注意事项

什么是JSX、是如何使用以及注意事项

1、什么是JSX
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

2、JSX使用过程中注意点

1）React元素的属性名使用驼峰命名法

2）特殊属性名：class->className、for->htmlFor、tabindex->tabIndex

3）没有子节点的React元素可以用/>结束

4）建议使用小括号包裹JSX，可以避免JS中的自动插入分号陷阱

3、JSX条件渲染

根据条件渲染特定的JSX结构（比如if…else、三元运算符、逻辑与运算符&&）其中逻辑与运算符是逻辑中断，只有前面正确才执行后面的，否则不会执行，适合要么展示要么隐藏类型。

例子：

import React from 'react'
import ReactDOM from 'react-dom'

// 条件渲染
const isLoading = true
const loadData = () => {
  if (isLoading) {
    return <