关于es2015箭头函数的大括号代码块部分的一点理解

背景：在react中，遍历一个数组，生成一系列input插入dom

错误代码：

{phones.map((phone, index) => {
    <div key={index}>{index}</div>
})}

控制台源码：

phones.map(function (phone, index) {
    _react2.default.createElement(
        'div',
        { key: index },
        index
    );
})

这里只是创建了元素节点，并没有return返回dom节点，结果页面没有插入创造的dom节点。

正确代码：(去掉大括号)

{phones.map((phone, index) => 
    <div key={index}>{index}</div>
)}

控制台源码：

phones.map(function (phone, index) {
    return _react2.default.createElement(
        'div',
        { key: index },
        index
    );
})

这里有return，结果页面插入dom节点。

实践：

不使用大括号，arrow function默认添加return。
而使用大括号，就只是一个代码块，so arrow function的return不会添加，需要的话必须手动添加。

一般使用箭头函数时，代码块部分只有一条语句时，不使用大括号：

var sum = (num1, num2) => num1 + num2
//同样的写法
var sum = (num1, num2) => { return num1 + num2 }

等同于

var sum = function(num1, num2) {
  return num1 + num2;
};

如果有多条语句，使用大括号，同时使用return(否则没有返回值)：

var sum = (n1, n2) => {
  console.log(n1);
  return n1 + n2
}

使用箭头函数返回对象：必须在对象外面加上括号，否则就只是个代码块，从而就不会返回对象了：

var sum = () => ({name: 'a'})

等同于

var sum = function sum() {
  return { name: 'a' };
};