render方法括號的作用

AaronYuan 發布于2019-08-21 18:00 / 3170人閱讀

摘要：并且只會執行表達式輸出與上面的表達式不同的是表達式和都會執行這就是括號的作用。所以可以得出結論方法中結果添加括號的目的是為了更符號原生編碼習慣的的思維并且在一些例如中編寫時標簽自動對齊方式更好看。

在學習過程中,發現一個小問題,因為小很少人關注討論過這個問題, react構建component的render方法中return后面為什么要加括號?
下面嘗試給出些解釋。
首先("

"),(1,2)這些都是原生支持的寫法,括號中多個合法的表達式都會執行,返回最后一個表達式的值。如下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
上面的等價于下面的寫法,按照行自動添加分號,分號表示一句執行表達式結束。并且只會執行表達式1
function a(){
return 1;
2;
}

function c(){
return( 
1,
2)
}
c() //輸出 2
與上面的表達式不同的是,表達式1和2都會執行,這就是括號的作用。

而react的render方法return括號中不是可執行表達式,而是一些html標簽,執行會報錯

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

所以可以得出結論,render方法中return結果添加括號的目的,是為了更符號原生編碼習慣的的思維,并且在一些IDE,例如webstrome中編寫時html標簽自動對齊方式更好看。

GPU云服務器云服務器 java中括號作用方法括號調用link python中的括號 html向下的括號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90317.html

React.js 常見問題

摘要：我們常常會收到一些有趣的問題，但大多數問題都是常見問題。我創建這個資源為了幫助學習者遇到這些常見的問題時提供一定幫助。這些是表示沒有任何子節點的元素的標記。不綁定處理程序方法我把這個留到最后，因為這是一個大問題，一個很常見的問題。在 jsComplete，我們管理一個專門用于幫助編程學習者 slack 帳戶。我們常常會收到一些有趣的問題，但大多數問題都是常見問題。我創建這個資源為了...

KitorinZero 2019-08-23 15:11 評論0 收藏0
箭頭函數你想知道的都在這里

摘要：沒有箭頭函數沒有自己的對象，這不一定是件壞事，因為箭頭函數可以訪問外圍函數的對象那如果我們就是要訪問箭頭函數的參數呢你可以通過命名參數或者參數的形式訪問參數不能通過關鍵字調用函數有兩個內部方法和。 1、基本語法回顧我們先來回顧下箭頭函數的基本語法。ES6 增加了箭頭函數： var f = v => v; // 等同于 var f = function (v) { return ...

xiaoqibTn 2019-08-23 16:44 評論0 收藏0
React.js學習筆記之JSX解讀

摘要：學習筆記之解讀前端技術不多說，大腿很粗什么是是的核心組成部分，它使用標記的方式去直接聲明界面，界面組件之間可以互相嵌套。它的目的是通過各種編譯器將這些標記編譯成標準的語言。的標簽與函數名都是使用的駝峰命名。目前，一個的，只能返回一個節點。 React.js學習筆記之JSX解讀 @(前端技術) Why React? 不多說，Facebook大腿很粗什么是JSX JSX是React的核心...

tianlai 2019-08-19 17:38 評論0 收藏0
React入門學習

摘要：對象的屬性與組件的屬性一一對應，但是有一個例外，就是屬性，它表示組件的所有子節點。此外，還提供兩種特殊狀態的處理函數。組件中樣式的寫法這種方式錯誤使用這種方式，第一重大括號表示這是語法，第二重大括號表示樣式對象。如何渲染到容器直接上代碼： //第一個參數是構造的組件，第二個參數是使用組件的容器 ReactDom.render( , document.getEleme...

laznrbfe 2019-08-19 17:34 評論0 收藏0
用 CirruScript 渲染 HTML

摘要：早的時候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強強主要是學習的作用后來有了就干脆不用了不過未來加載靜態資源還是需要有就覺得麻煩搞出點東西來這個模塊經過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調用早的時候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強強, 主要是學習的作用...

BigNerdCoding 2019-08-21 10:38 評論0 收藏0