玩轉 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

關注妙味訂閱號：「妙味前端」，爲您帶來優質前端技術乾貨；