关于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节点

实践

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

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' };
};