render方法括號(hào)的作用

AaronYuan 發(fā)布于2019-08-21 18:00 / 3168人閱讀

摘要：并且只會(huì)執(zhí)行表達(dá)式輸出與上面的表達(dá)式不同的是表達(dá)式和都會(huì)執(zhí)行這就是括號(hào)的作用。所以可以得出結(jié)論方法中結(jié)果添加括號(hào)的目的是為了更符號(hào)原生編碼習(xí)慣的的思維并且在一些例如中編寫時(shí)標(biāo)簽自動(dòng)對(duì)齊方式更好看。

在學(xué)習(xí)過程中,發(fā)現(xiàn)一個(gè)小問題,因?yàn)樾『苌偃岁P(guān)注討論過這個(gè)問題, react構(gòu)建component的render方法中return后面為什么要加括號(hào)?
下面嘗試給出些解釋。
首先("

"),(1,2)這些都是原生支持的寫法,括號(hào)中多個(gè)合法的表達(dá)式都會(huì)執(zhí)行,返回最后一個(gè)表達(dá)式的值。如下demo示例所示

function a() {
console.log("a")
}
function b(){
console.log("b")
}
var ans = (a(),b(),"c")
console.log(ans)
//輸出 a b c

但是()在return后的作用又不一樣了,起到分隔的作用

function a(){
return 1
2
}
a() //輸出1
上面的等價(jià)于下面的寫法,按照行自動(dòng)添加分號(hào),分號(hào)表示一句執(zhí)行表達(dá)式結(jié)束。并且只會(huì)執(zhí)行表達(dá)式1
function a(){
return 1;
2;
}

function c(){
return( 
1,
2)
}
c() //輸出 2
與上面的表達(dá)式不同的是,表達(dá)式1和2都會(huì)執(zhí)行,這就是括號(hào)的作用。

而react的render方法return括號(hào)中不是可執(zhí)行表達(dá)式,而是一些html標(biāo)簽,執(zhí)行會(huì)報(bào)錯(cuò)

function test () {
    return (
                
                    test
                
            )
}
上面寫法等價(jià)于下面的寫法
function test () {
 return 
         test
  
       }
最終經(jīng)過babel-jsx轉(zhuǎn)義才能被瀏覽器執(zhí)行,轉(zhuǎn)義結(jié)果如下。
function test() {
  return React.createElement(
    "p",
    null,
    React.createElement(
      "span",
      null,
      "test"
    )
  );
}

所以可以得出結(jié)論,render方法中return結(jié)果添加括號(hào)的目的,是為了更符號(hào)原生編碼習(xí)慣的的思維,并且在一些IDE,例如webstrome中編寫時(shí)html標(biāo)簽自動(dòng)對(duì)齊方式更好看。