render方法括号的作用

AaronYuan 发布于2019-08-21 18:00 / 3077人阅读

摘要：并且只会执行表达式输出与上面的表达式不同的是表达式和都会执行这就是括号的作用。所以可以得出结论方法中结果添加括号的目的是为了更符号原生编码习惯的的思维并且在一些例如中编写时标签自动对齐方式更好看。

在学习过程中,发现一个小问题,因为小很少人关注讨论过这个问题, 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标签自动对齐方式更好看。

idc机房托管云服务器 java中括号作用方法括号调用link python中的括号 html向下的括号

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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