摘要：今天我們來看一種優(yōu)雅的編寫的代碼的一種方式。有了之后，可以幫助我們在編寫模板的時(shí)候結(jié)構(gòu)更加簡單清晰。以上是筆者歸納總結(jié)，如有誤之處，歡迎指出。

往期回顧

前文中我們講解了利用 ReactElement 來編寫React程序,但是我們也看到這種方式編寫 React 特別的麻煩，而且層級結(jié)構(gòu)特別不清晰。今天我們來看一種優(yōu)雅的編寫React的代碼的一種方式 JSX。
JSX

JSX就是把 js 和 xml 結(jié)合起來編寫程序的一種格式，簡單的說就是給我們的 JS 添加了 XML 的語法擴(kuò)展。有了 JSX 之后，可以幫助我們在編寫模板的時(shí)候結(jié)構(gòu)更加簡單清晰。 我們可以對比一下，咱們使用 ReactElement 和 JSX 編寫同一個(gè)結(jié)構(gòu)時(shí)的區(qū)別，大家就會(huì)喜歡上 JSX;

利用 ReactElement 編寫的結(jié)構(gòu)

let Title = React.createElement("h1",null,"頁面標(biāo)題"); 
let Header = React.createElement("header",null,Title);  
let Sider = React.createElement("aside",null,"側(cè)邊欄");  
let Content = React.createElement("article",null,"頁面內(nèi)容"); 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 編寫的結(jié)構(gòu)

ReactDOM.render(
        

            

                
頁面標(biāo)題
            
            

                
                
頁面內(nèi)容
            
            
        
        document.getElementById("root")
    );

從上述示例中我們看到在 JSX 中我們可以直接使用我們熟悉的 HTML 標(biāo)簽來書寫我們的模板，這樣的話結(jié)構(gòu)層級非常清晰，也便于我們維護(hù)，當(dāng)然上手也更便捷。

JSX 使用時(shí)的注意事項(xiàng)

在使用 JSX 中，不能嵌套多個(gè)同級標(biāo)簽，一定要在外邊加一個(gè)父級
使用 JSX 時(shí)，我們需要使用 Babel 來進(jìn)行編譯，所以必須引入 Babel 并且在 script 上 添加 type="text/babel" 來提示 babel 編譯我們 script 中的代碼,如下所示：

使用 JSX 時(shí)，當(dāng)我們要寫的是一個(gè) HTML 標(biāo)簽時(shí)，請全部小寫
使用 JSX 時(shí)，所有標(biāo)簽都必須閉合單標(biāo)簽 <單標(biāo)簽 /> 也一樣必須閉合

插值表達(dá)式

當(dāng)我們需要在 JSX 中插入一個(gè)js數(shù)據(jù)時(shí)，我們就需要使用插值表達(dá)式。 在 JSX 中，讀到{} 時(shí)，它就會(huì)認(rèn)為你要插入一條js數(shù)據(jù)，這個(gè) {} 就是插值表達(dá)式，使用示例如下：

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

插值表達(dá)式在什么時(shí)候使用

當(dāng)我們需要在 JSX 中使用 JS 中的數(shù)據(jù)的時(shí)候，我們就需要使用差值表達(dá)式
當(dāng)我們要在 JSX 中添加 注釋的時(shí)候，也需要使用插值表達(dá)式 {/ 在這里寫JSX的注釋 /}

使用插值表達(dá)式時(shí)的注意事項(xiàng)

{}中，接收一個(gè) JS 表達(dá)式，可以是我們的算術(shù)表達(dá)式，變量 或函數(shù)調(diào)用, 最終 {} 接收的是表達(dá)式 計(jì)算的結(jié)果
{}中，接收的是 函數(shù)調(diào)用時(shí)，該函數(shù)需要由返回值
{}中，不能寫 if else 以及 switch 這些流程控制語句，但是可以使用三目表達(dá)式 來進(jìn)行判斷，示例如下：

    let a = 10;
          let b = 20;
          ReactDOM.render(
               
{a > b?"正確":"錯(cuò)誤"}
,
               document.getElementById("root")
      );

{}中，不能寫 for 或者 whlie 這些循環(huán)語句，可以使用數(shù)組方法代替,示例如下：

    let arr = [
       "這是第一項(xiàng)",
       "這是第二項(xiàng)",
       "這是第三項(xiàng)"
      ]
      ReactDOM.render(
           

           {arr.map((item,index)=>{
           /* 當(dāng)我們要向 JSX 中添加一組元素時(shí)，一定要設(shè)置  key 屬性，具體內(nèi)容 我們會(huì)在后邊的文章中講到 */
           return 
{item}
           })}
           
,
       document.getElementById("root")
      );

不同類型數(shù)據(jù)在插值表達(dá)式中的數(shù)據(jù)輸出

字符串、數(shù)字：原樣輸出
布爾值、空、未定義：輸出空值，也不會(huì)有錯(cuò)誤
對象：不能直接輸出，但是可以通過其他方式，Object.values、Object.keys 等方法去解析對象
數(shù)組：支持直接輸出，默認(rèn)情況下把數(shù)組通過空字符串進(jìn)行拼接

JSX的屬性操作

屬性值加了引號，那么就是一個(gè)普通的屬性書寫方式

    ReactDOM.render(
          
React筆記
,
          document.getElementById("root")
      );

屬性值可以直接寫成差值表達(dá)式

    let title = "React筆記" 
      ReactDOM.render(
          
React筆記
,
          document.getElementById("root")
      );

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

ReactDOM.render(
      
React筆記
,
      document.getElementById("root")
  );

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

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

  ReactDOM.render(
      
React筆記
,
      document.getElementById("root")
  );

看完了 JSX 的基本操作之后，我們來看一個(gè)小例子，如何通過數(shù)據(jù)來生成一個(gè)簡單的視圖

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")
    );

關(guān)于 JSX 的基本使用我們就說到這，在下一章節(jié)中我們要說到一個(gè)比較重的內(nèi)容--組件。
當(dāng)然在 React 中編寫組件的方式也會(huì)有多種，我們在下一篇中詳細(xì)的說。
——以上是筆者歸納總結(jié)，如有誤之處，歡迎指出。

訂閱號ID：Miaovclass
關(guān)注妙味訂閱號：“妙味前端”，為您帶來優(yōu)質(zhì)前端技術(shù)干貨；