簡介JSX

JSX是什麼

接觸過react或者vue的同窗可能知道或者瞭解jsx,我也接觸react兩年了，可是昨天我問了本身一下‘jsx是什麼’，我卻不能流利回答處理，只是一直使用，殊不知道jsx的來源，因而我就去react官網查看《草案：jsx規範》給你們分享一下

一、jsx是什麼？

在ECMAScript 第六版的草案中是這樣定義的：「jsx是相似xml的語法擴展，沒有任何定義的語義，不是由瀏覽器和引擎實現的，它旨在被各類預處理器處理後變成標準ECMAScript」 若是不怎麼了解ECMAScript能夠查看《js的組成部分》。

二、該語法擴展的規範是什麼？

用於定義帶有屬性樹結構的簡明且熟悉的語法，可以定義良好的語法並使用獨立的解析器和語法高亮顯示的社區可以符合單個規範

三、建立的目的是什麼？

在保持獨立語法簡潔且熟悉的狀況下建立最小的語法空間。

四、jsx選擇類型引用

在起初如今類型引用的時候，曾嘗試夠一下幾種

• 1 ECMAScript第六版版本的模板文字`string ${ varate

  看下代碼，模板文字用在這是不合適，語法的噪聲太大，可讀性差。

// Template Literals
var box = jsx`
  <${Box}>
    ${
      shouldShowAnswer(user) ?
      jsx`<${Answer} value=${false}>no</${Answer}>` :
      jsx`
        <${Box.Comment}>
         Text Content
        </${Box.Comment}>
      `
    }
  </${Box}>
`;
複製代碼

• 2 ECMAScript第五版版本的JSON{"key":"value"}

另外一種選擇是使用對象初始化器（相似於JXON）。不幸的是，平衡的大括號沒有給出元素在大樹中開始和結束的地方的語法提示。平衡的命名標記是XML樣式表示法的關鍵語法特徵。

const element = "<div>{"key":"value"}</div>"
複製代碼

• 3 PrimaryExpression

所以，最好將JSX做爲一種全新的PrimaryExpression類型引入：

// JSX
var box =
  <Box>
    {
      shouldShowAnswer(user) ?
      <Answer value={false}>no</Answer> :
      <Box.Comment>
         Text Content
      </Box.Comment>
    }
  </Box>;
複製代碼

5 jsx語法擴展使用

我們在上面已經瞭解了jsx是什麼，爲何定義jsx，他的規範是什麼，jsx選擇的引用類型是什麼，那麼我們就看看常見jsx

//1 jsx是嚴格閉合的

     const Element = <h1>// error
     
     const Element = <h1/>// right
     const Element = <h1></h1>// right
 
 //2 jsx 能夠做爲變量的值
     
      const Element = <h1>string</h1>
      
 //3 jsx 嵌套規則 只能有一個父級節點
  
      //error
      const Element = <div>string</div> <div>string2</div>
      
      //rigth
        const Element = <div>
                            <div>string1</div> 
                            <div>string2</div> 
                        </div> 
//4 jsx自定的組件必須大寫

    // error 在第三方使用的jsx的時候某些轉換器轉換的時候 會直接當中element標籤解析
    const element = <div>
                        <div>string1</div> 
                        <div>string2</div> 
                    </div> 

    // right
    const Element = <div>
                        <div>string1</div> 
                        <div>string2</div> 
                    </div> 
複製代碼

6 在js中使用

//在react中使用
    //1 使用變量
    
        const  TEXT = 'this is variate'
        const Element = <div> { TEXT } </div>
        ReactDom.render(<Element/>, document.getElementById('root'))
    
     //2 使用Array 
         const arr = [
          'this is variate',
          'this is variate'
         ]
        
        const Element = <div>{
                         arr.map(( item, index )=>(<div id={index} >{item} </div>))
                        }</div>
        ReactDom.render(<Element/>,document.getElementById('root'))
    
    //3 使用條件判斷
    
        //error 在jsx中通常轉換器不支持直接使用if
        const  TEXT = 'this is variate'
        const Element = <div>{if(1==2){TEXT}}</div>
        ReactDom.render(<Element/>,document.getElementById('root'))

        //right 可是使用三目運算費和邏輯|| 或者 && 通常轉換器是能夠的
        
        // 三目運算
        const  TEXT = 'this is variate'
        const Element = <div>{1==2?TEXT:''}</div>
        ReactDom.render(<Element/>,document.getElementById('root'))
        // || 
        const  TEXT = 'this is variate'
        const Element = <div>{false||true?TEXT:''}</div>
        ReactDom.render(<Element/>,document.getElementById('root'))
        // &&
        const  TEXT = 'this is variate'
        const Element = <div>{false&&true?TEXT:''}</div>
        ReactDom.render(<Element/>,document.getElementById('root'))
    
    //4 使用ECMAScript 第六版的結構賦值 ‘...’
      const  TEXT = 'this is variate'
      const props = { onClick:()=>{}, data:'this is data' }
        const Element = <div> {false && true? TEXT : '' } </div>
        ReactDom.render(<Element {...props}/>,document.getElementById('root'))
        
    // 5 jsx的註釋
        // 5.1 外部註釋
            //error 註釋時必須把一個整的標籤都註釋掉
            <div>
            //    <div>string1</div> 
            //    <div>string2</div> 
           // </div> 
        
            // right
            //<div>
            //    <div>string1</div> 
            //    <div>string2</div> 
           // </div> 
          
        // 5.2 內部註釋
            //error 註釋時必須把一個整的標籤都註釋掉
            <div>
               {
                   /*
                   variate
                   */
               }
            </div>
        

複製代碼

7 JSX和HTML、XML的區別

JSX規範不會嘗試遵照任何XML或HTML規範。JSX被設計爲ECMAScript功能，與XML的類似之處僅在於熟悉。

7.1 在jsx在js中使用時，能夠看到jsx能夠直接使用變量、數組、三目運算、方法等，可是html是不能夠直接使用的

7.2 HTML中使用的class做爲css的名字在jsx中是不可使用，由於在jsx中認爲class爲關鍵字。就像js使用className

const variate='this is a variate'
    const Element = <div className = 'test'>{variate}</div>
複製代碼

7.3 HTML中使用的style做爲css的行內樣式，而在jsx就像js使用style同樣

const variate='this is a variate'
    const Element = <div style = {{height:'89px',overFlow:'auto'}}>{variate}</div>
複製代碼

7.4 jsx 中的事件名稱都以小駝峯命名

const variate='this is a variate'
    const Element = <div onClick={()=>{}} onChage={()=>{}}>{variate}</div>
複製代碼

7.5 一些屬性只有在jsx中存在

• 1 key
• 2 ref
• 3 dangerouslySetInnerHTML

7.6 jsx防止注入攻擊

const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;

複製代碼

默認狀況下，一些語言渲染以前轉義 JSX中嵌入的任何值。所以，它確保您永遠不會注入未在應用程序中明確寫入的任何內容。在渲染以前，全部東西都被轉換爲字符串。這有助於防止XSS（跨站點腳本）攻擊。

8 爲何react要選擇jsx

react不須要使用jsx，可是大多人發如今JavaScript代碼中使用UI時，jsx做爲視覺輔助工具頗有用。jsx容許react顯示更多有用的錯誤警告。

結合上面中jsx在js中使用的快捷高效何樂而不爲。

在react中jsx，會被babel編譯成 React.createElement（）調用

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
const element = React.createElement(
  'h1',//type
  {className: 'greeting'},//props
  'Hello, world!'//text
);
//React.createElement() 
複製代碼