往期回顾

前文中我们讲解了利用 ReactElement 来编写React程序,但是我们也看到这种方式编写 React 特别的麻烦，而且层级结构特别不清晰。今天我们来看一种优雅的编写React的代码的一种方式 JSX。

JSX

JSX就是把 js 和 xml 结合起来编写程序的一种格式，简单的说就是给我们的 JS 添加了 XML 的语法扩展。有了 JSX 之后，可以帮助我们在编写模板的时候结构更加简单清晰。 我们可以对比一下，咱们使用 ReactElement 和 JSX 编写同一个结构时的区别，大家就会喜欢上 JSX;

利用 ReactElement 编写的结构

`let Title = React.createElement("h1",null,"页面标题"); let Header = React.createElement("header",null,Title);  let Sider = React.createElement("aside",null,"侧边栏");  let Content = React.createElement("article",null,"页面内容"); let Main = React.createElement("div",null,Sider,Content); let Footer = React.createElement("footer",null,"页面底部");  let Page = React.createElement(      "div",      null,	 Header,	 Main,	 Footer); ReactDOM.render(	 Page,	 document.getElementById("root") );`

利用 JSX 编写的结构

`ReactDOM.render(		
    
			
     
				
      
页面标题
			
     
			
     
				
      				
      
       页面内容
      
			
     
			
     		
    
		document.getElementById("root")	);`

从上述示例中我们看到在 JSX 中我们可以直接使用我们熟悉的 HTML 标签来书写我们的模板，这样的话结构层级非常清晰，也便于我们维护，当然上手也更便捷。

JSX 使用时的注意事项

在使用 JSX 中，不能嵌套多个同级标签，一定要在外边加一个父级 使用 JSX 时，我们需要使用 Babel 来进行编译，所以必须引入 Babel 并且在 script 上 添加 type="text/babel" 来提示 babel 编译我们 script 中的代码,如下所示：

使用 JSX 时，当我们要写的是一个 HTML 标签时，请全部小写 使用 JSX 时，所有标签都必须闭合单标签 <单标签 /> 也一样必须闭合

插值表达式

当我们需要在 JSX 中插入一个js数据时，我们就需要使用插值表达式。 在 JSX 中，读到{} 时，它就会认为你要插入一条js数据，这个 {} 就是插值表达式，使用示例如下：

let a = "hello";let b = "React";ReactDOM.render(    
{a + b}
,    document.getElementById("root"));

插值表达式在什么时候使用

当我们需要在 JSX 中使用 JS 中的数据的时候，我们就需要使用差值表达式 当我们要在 JSX 中添加 注释的时候，也需要使用插值表达式 {/* 在这里写JSX的注释 */}

使用插值表达式时的注意事项

{}中，接收一个 JS 表达式，可以是我们的算术表达式，变量 或函数调用, 最终 {} 接收的是表达式 计算的结果 {}中，接收的是 函数调用时，该函数需要由返回值 {}中，不能写 if else 以及 switch 这些流程控制语句，但是可以使用三目表达式 来进行判断，示例如下：

let a = 10;      let b = 20;      ReactDOM.render(           
{a > b?"正确":"错误"}
,           document.getElementById("root")  );

{}中，不能写 for 或者 whlie 这些循环语句，可以使用数组方法代替,示例如下：

let arr = [   "这是第一项",   "这是第二项",   "这是第三项"  ]  ReactDOM.render(       
    
            {arr.map((item,index)=>{       /* 当我们要向 JSX 中添加一组元素时，一定要设置  key 属性，具体内容 我们会在后边的文章中讲到 */       return 
     
{item}
       })}       
    
,   document.getElementById("root")  );

不同类型数据在插值表达式中的数据输出 字符串、数字：原样输出 布尔值、空、未定义：输出空值，也不会有错误 对象：不能直接输出，但是可以通过其他方式，Object.values、Object.keys 等方法去解析对象 数组：支持直接输出，默认情况下把数组通过空字符串进行拼接

JSX的属性操作

属性值加了引号，那么就是一个普通的属性书写方式

ReactDOM.render(      
React笔记
,      document.getElementById("root")  );

属性值可以直接写成差值表达式

let title = "React笔记"   ReactDOM.render(      
React笔记
,      document.getElementById("root")  );

class：在 JSX 中需要使用 className 属性去代替 class

`ReactDOM.render(	  
React笔记
,	  document.getElementById("root")  );`

style：在 JSX 中 style 的值只能是对象 style={

let style = {  borderBottom: "1px solid #000"  }  ReactDOM.render(	  
React笔记
,	  document.getElementById("root")  );  ReactDOM.render(	  
React笔记
,	  document.getElementById("root")  );

看完了 JSX 的基本操作之后，我们来看一个小例子，如何通过数据来生成一个简单的视图

let data = {		title: "巅峰榜·热歌",		details: [				{				name: "体面",				message: "《前任3：再见前任》电影插曲"				},				{				name: "说散就散",				message: "《前任3：再见前任》电影主题曲"				},				{				name: "BINGBIAN病变 (女声版) ",				message: "抖音热门歌曲"				}		] }	ReactDOM.render(		
    
		
     
{data.title}
		
     
      		{data.details.map((item,index)=>{		return (		
      
			
{item.name}
			
{item.message}
		
		);		})}		
     
		
    
,	document.getElementById("root")	);

关于 JSX 的基本使用我们就说到这，在下一章节中我们要说到一个比较重的内容--组件。 当然在 React 中编写组件的方式也会有多种，我们在下一篇中详细的说。 ——以上是笔者归纳总结，如有误之处，欢迎指出。

订阅号ID：Miaovclass

关注妙味订阅号：“妙味前端”，为您带来优质前端技术干货；