return语句中的两个不同的括号语法

Question

我在https://scotch.io/tutorials/learning-react-getting-started-and-concepts上按照本教程开始使用ReactJS,并遇到了这个通用代码,它有两个不同的return语句括号.

var MyComponent = React.createClass({
getInitialState: function(){
    return {
        count: 5
    }
},
render: function(){
    return (
        <h1>{this.state.count}</h1>
    )
}
});

他们为什么不同？交换其中任何一个都会导致错误.

Answer 1

第一个是对象的有效JS返回,第二个是分组操作符.使用(stuff && moreStuff)return语句中返回的结果在括号内代码的,无论那是.

在这种情况下,括号内有一些特殊的JSX,浏览器无法理解.它在执行之前(通常在编译时)转换为嵌套的react.createElement(...)调用树.JSX只是为了方便您提供类似HTML的体验.

正如我所说的,括号只返回内部的结果,所以你可以在其中返回一个对象,这在编写短箭头函数时很有用:const mergeObject = (obj1, obj2) => ({ ...obj1, ...obj2 })而不是:

const mergeObject = (obj1, obj2) => {
  return {
    ...obj1,
    ...obj2,
  };
}