玩转 React【第02期】：恋上 React 模板 JSX

往期回顾

前文中咱们讲解了利用 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(
		<div>
			<header>
				<h1>页面标题</h1>
			</header>
			<div>
				<aside>侧边栏</aside>
				<article>页面内容</article>
			</div>
			<footer>页面底部</footer>
		</div>
		document.getElementById("root")
	);`

从上述示例中咱们看到在 JSX 中咱们能够直接使用咱们熟悉的 HTML 标签来书写咱们的模板，这样的话结构层级很是清晰，也便于咱们维护，固然上手也更便捷。

JSX 使用时的注意事项

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

<script type="text/babel">
    ReactDOM.render(
    <div>
            <h1>hello world</h1>
            <p>注意 type 另外 必须有一个父标签包裹</p>
    </div>,
    document.getElementById("root")
    );
</script>

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

插值表达式

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

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

插值表达式在何时使用

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

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

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

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

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

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

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

JSX的属性操做

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

ReactDOM.render(
      <h1 title="React笔记">React笔记</h1>,
      document.getElementById("root")
  );

属性值能够直接写成差值表达式

let title = "React笔记" 
  ReactDOM.render(
      <h1 title={title}>React笔记</h1>,
      document.getElementById("root")
  );

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

`ReactDOM.render(
	  <h1 className="title">React笔记</h1>,
	  document.getElementById("root")
  );`

style：在 JSX 中 style 的值只能是对象 style={{ property : value }}

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

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

看完了 JSX 的基本操做以后，咱们来看一个小例子，如何经过数据来生成一个简单的视图

let data = {
		title: "巅峰榜·热歌",
		details: [
				{
				name: "体面",
				message: "《前任3：再见前任》电影插曲"
				},

				{
				name: "说散就散",
				message: "《前任3：再见前任》电影主题曲"
				},

				{
				name: "BINGBIAN病变 (女声版) ",
				message: "抖音热门歌曲"
				}
		]
 }
	ReactDOM.render(
		<section className="box">
		<h2 className="title">{data.title}</h2>
		<ul className="list">
		{data.details.map((item,index)=>{
		return (
		<li>
			<p className="name">{item.name}</p>
			<p className="message">{item.message}</p>
		</li>
		);
		})}
		</ul>
		</section>,
	document.getElementById("root")
	);

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

订阅号ID：Miaovclass

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