es6对象的扩展运算符在redux中的问题

Question

在学习redux的todolist的时候，对于组件使用扩展运算符不是很清楚。想知道TodoList组件里的{...todo} 究竟引入了哪一些东西，以及为什么要给Todo组件加上key属性。

Answer 1

{...todo}

就是把todo的所有属性就传入了Todo组件，比如：

var todo = { a:123,b:345 }
<Todo {...todo} /> //相当于 <Todo a="123" b="345" />

key 的的作用是为了给每个Todo组件一个唯一的标识，这里循环引用多个Todo组件，给每个组件一个唯一标识可以优化react的渲染。

Answer 2

key是作为你map返回对象的唯一标识，对于react的渲染是非常有用的，可以优化速度，如果你不写也没有关系，只是会在调试的过程中warning 让你加标识
{...todo},es6语法，也是为了简化代码用的，它可以将todo这个json里面的所有内容作为这个组件，或者标签的属性，简化代码而已。json的key作为属性名称，json的value作为属性的值