學習React，從攻克JSX開始

小美娜娜發表於2018-09-04
ReactJS

詳情參考官方JSX規範

雖然JSX是擴充套件到ECMAScript的類XML語法，但是它本身並沒有定義任何語義。也就是說它本身不在ECMAScript標準範圍之內。它也不會被引擎或者瀏覽器直接執行。通常會利用很編譯器前處理器來將這些JSX轉化為標準的ECMAScript。

吐槽：雖然JSX出發點是好的，而且寫起來也很簡單，但是對於要在JS中寫類HTML格式的內容，我的內心是排斥的，感覺非常不習慣。這不是我熟知的web開發啊！有種在開發app的感覺，一個個自定義的元件。

想看看他是怎麼編譯JSX，於是我看了下用JS的寫法寫元件，主要的方法就是React.createElement：

React.createElement(
  type,
  [props],
  [...children]
)
複製程式碼

第一個引數type是型別，也就是名字，比如h1、div、自定義元件名等~ 第二個引數[props]其實就是各種屬性，我們在JS中怎麼寫屬性的，在這裡就怎麼寫。比如img.src="",div.className=""這樣的，那麼屬性就是這麼寫的{className:"",src:""}，屬性名和JS保持一致。 第三個引數，其實就是無限延展當前節點的子節點，你想有多少個就有多少個。

來看一眼官方文件的轉化，這個是我用React.createElement來轉義的JSX，這樣一個套一個的寫法，什麼時候才是個頭。強烈的求生欲使我放棄了JS的寫法，轉投JSX的寫法了：

學習React，從攻克JSX開始

相比較這種無限巢狀的寫法，JSX友善太多了。從語義化的角度來說，JSX的可讀性也是很好滴。（為自己學習JSX強行找理由。）

深入瞭解JSX的物件

上一節提到，

let element=<h1 className="aaa">A爆了</h1>
//等同於
let element=React.createElement(
  "h1",
  {className:"aaa"},
  "A爆了"
)
複製程式碼

那麼是不是我直接let {type,props,children}=element就可以得到 h1、{className:"aaa"}和A爆了了呢？我還是太天真了。type確實是h1，但是props打出來是{className: "aaa", children: "A爆了"}。咦？怎麼children混在了這裡，那麼後面得children呢？毫無疑問undefined。也就是說一個React.createElement或者JSX的物件的結構是這樣的：

{
    type:"h1",
    props:{
        className:"aaa",
        children:"A爆了"
    }
}
複製程式碼

JSX的花式寫法（內含錯誤演示）

JSX有許多中寫法，看的我是眼花繚亂，不如來分析分析這些寫法的奧祕，為什麼要這麼寫，然後找一種自己喜歡的方式來寫。這裡我會以let element=XXX為例子，然後大家可以直接ReactDOM.render(element, document.getElementById('root'));這樣渲染。

寫法一：一個標籤內嵌純文字

我習慣在寫JS的時候，將這些標籤寫在字串中，然後拼接起來。看到這麼寫，真的覺得是個bug，瀏覽器一定會報錯的！然而在react中，不會報錯的，這是正確的。

let element=<h1 className="aaa">A爆了</h1>
ReactDOM.render(element, document.getElementById('root'));
複製程式碼

錯誤寫法演示：無標籤純文字

那如果是純文字呢？華麗麗地報錯了。說名JSX還是需要標籤包裹的。

let element=A爆了
複製程式碼

寫法二：一個標籤巢狀標籤混合文字

那麼我們多加幾個子元素進，也是OK的，沒什麼毛病。

let element=<h1 className="aaa">aaa<span>A爆了</span>bbbb</h1>
複製程式碼

寫法三：Fragment包裹所有！

錯誤寫法演示：多個標籤並列

如果是很多個並列地兄弟節點呢？突然興奮！報錯了~果然不能皮。為什麼呢？大家都是正正經經的HTML標籤啊。

let element=
    <h1 className="aaa">A爆了</h1>
    <h1 className="aaa">A爆</h1>
複製程式碼

學習React，從攻克JSX開始

官方給出的解釋是：必須包裹在一個閉合的標籤內。意思就是說不能N個閉合標籤並列嗎？

let element=
<div>
    <h1 className="aaa">A爆了</h1>
    <h1 className="aaa">A爆</h1>
</div>
複製程式碼

外面多加一層div就可以。可是這樣可能會多出很多個不需要的div啊，我們乾乾淨淨的HTML，會不會變成巢狀地獄啊。官方的求生欲也是很強的，早就想到了這一點，所以有一個官方的元件叫做Fragment。專門用於包裹這些不需要多加一層div的元素們。這個元件的用法：

//首先別忘了匯入，不然直接React.Fragment也是可以的
import React,{Fragment} from 'react';
//然後
let element=
<Fragment>
    <h1 className="aaa">A爆了</h1>
    <h1 className="aaa">A爆</h1>
</Fragment>
複製程式碼

前面提到了element列印的結構：{type:"h1",props:{className:"aaa",children:"A爆了"}}，好奇心旺盛的我列印了下<Fragment>的element是什麼樣的。結果如下所示，type:Symbol(react.fragment)，雖然這個根節點是特殊的標籤，不是div,p這種正正經經的HTML標籤，但也是一個節點了。也就是說element相當於一個根節點，這個根節點只能有一個，然後這個根節點可以有無數的子節點。

{
    type:Symbol(react.fragment),
    props:{
        children:[
        {type: "h1", props: {…}}
        {type: "h1", props: {…}}
    ]
}
複製程式碼

寫法四：陣列真的不行嗎？

好奇心旺盛的我，不願意屈服於所有的外面都要加一個標籤包裹，文件說的是一個閉合的標籤，那麼[]這樣包裹一個陣列可不可以呢？wow~沒有報錯！也就是說閉合標籤不一定指代<></>也可以是[]，來代表一個整體。

let element=
    [
        <li>1</li>,
        <li>1</li>,
        <li>1</li>
    ]
複製程式碼

寫法五：長的好看而已

我還看到一種寫法，就是在最外層加上()來包裹整個節點。我一開始以為這是什麼騷操作，會讓element變得與眾不同。於是，我做了個實驗，將兩個一樣的節點進行對比，不同點在於第一個無()，第二個有()，然後結果是true，也就是說他們本質上沒啥不同。所以小夥伴們，不寫()也不會報錯的。

let element=<div><h1 className="aaa">A爆了</h1><h1 className="aaa">A爆</h1></div>
let element1=(<div><h1 className="aaa">A爆了</h1><h1 className="aaa">A爆</h1></div>)
console.log(JSON.stringify(element1)===JSON.stringify(element))
複製程式碼

那麼這個括號有什麼用呢？當然有！好看！我們來看一樣Component裡面的render如果沒有()會怎麼樣。

render() {
    return (
        <div className="App">
            <p className="App-intro">To get started, edit<code>src/App.js</code> and save to reload.</p>
        </div>
    )
}
複製程式碼

原本是有()的，然後可以換行，把節點排排整齊。看著也很舒服。然後我們把()去了會怎麼樣？整齊是整齊，但是會報錯啊！

render() {
    return 
        <div className="App">
        .....
}
複製程式碼

這裡就有一個小知識點，js語言設計中return的內容必須一行完成，不要跟回車，不然就會報錯。（真是任性的操作）也就是說像下方這麼寫就沒有問題。但是我就沒辦法保證整整齊齊的標籤了啊！這個排版怎麼排都醜。所以這個時候()就展現出了他的魅力，代表了一個整體，告訴return我還沒結束。所以大家也不要被()給迷惑了，不要怕他。

render() {
    return <div className="App">
        .....
}
複製程式碼

JSX中的標籤屬性

寫JSX會發現，雖然我是在寫HTML，但是有些屬性好奇怪啊，經常寫錯，比如最常見的className。我總結出一點我們寫標籤的時候是HTML，寫屬性的時候要用JS思維。這樣就不復雜，也不難記拉！

\\JS中怎麼取class屬性的呢？
document.getElementById('myid').className
\\遇到特殊的<label id="label" for="xxx"></label>，這個for在JS中怎麼獲取呢？
document.getElementById('label').htmlFor
複製程式碼

那麼問題來了，有一個名為style的屬性，你要怎麼處理？style就比較複雜了，他不是一個值一個字串能夠搞定搞定的。我先在報錯的邊緣試探下吧。

試探一：字串！

let element=<div style="color:green">A爆</div>
複製程式碼

報錯啦！報錯啦！官方提示我們Thestyleprop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.也就是說style需要從樣式屬性對映到他的值，字串是不可以的。所以就需要{marginRight: spacing + 'em'}像這樣的物件才可以。那為什麼要再加一層{}?

試探二：單層{}

let element=<div style={color:"green"}>A爆</div>
複製程式碼

直接編譯錯誤了。也就是說JSX中不能直接包含JS的函式。而要用{}包裹起來JS函式。所以才有了雙層{}。第一層是代表我是JS，第二層其實就是屬性物件本身了。大家不用再試探底線了老老實實：

let element=<div style={{color:"green"}}>A爆</div>
複製程式碼

如果想再JSX中加註釋怎麼辦？直接<!--XXX-->肯定報錯囧。我們可以用{/*XXX*/}的方式註釋，因為{}標籤裡面是js函式，我們用JS的註釋就OK拉！（其實JSX還是JS啊。）

JSX中使用JS

上文提到{}中包含的是JS，那麼我們是不是可以玩出更多的花樣的？因為{}中我們就可以用JS為所欲為了！

比如迴圈（正確）：

let arr=[1,2,3]
let element=(
    {arr.map((v,i)=>
        <div>{v}-A爆</div>
    )}
)
複製程式碼

如果不想迴圈直接return，可以這樣，內部加上大括號，再繼續寫額外操作。別忘了return，只有=>函式可以省去return

let arr=[1,2,3]
let element=(
    <Fragment>
        {arr.map((v,i)=>{
            if(v===1){
                return <span>A爆了</span>
            }else{
                return <span>B爆了</span>
            }
        })}
    </Fragment>
)
複製程式碼

但是如果JS在標籤<></>外部的話，就可以直接使用，而不用加上{}：

let element=
    arr.map((v,i)=>{
        if(v==1){
            return <div>{v}-A爆</div>
        }else{
            return <div>{v}-B爆</div>
        }
    })
複製程式碼

大家注意了，這裡無論如何element都是一個物件，所以賦予他的值也只能是物件。所以不能直接if/else進行操作，建議再JSX外層操作，而不是直接再JSX中的外層操作。

比如這樣，那就只能等吃紅牌了。

let element=(
    if(v===1){
        return <span>A爆了</span>
    }else{
        return <span>B爆了</span>
    }
)
複製程式碼

最好是這樣：

let v=1;
let element;
if(v===1)
    element=<span>A爆了</span>
}else{
    element=<span>B爆了</span>
}
複製程式碼

在Comopent的render中，我麼可以這麼寫：

render() {
    if(v===1){
        return <span>A爆了</span>      
    }else{
        return <span>B爆了</span>
    }
}
複製程式碼

研究完之後，發現JSX就是JS啊，以及每次用JSX“語法”寫的元素，都要返回一個陣列或者是物件。只要牢記這一點，就可以玩轉JSX。

相關文章