扫码关注官方订阅号
在学习redux的todolist的时候,对于组件使用扩展运算符不是很清楚。想知道TodoList组件里的{...todo} 究竟引入了哪一些东西,以及为什么要给Todo组件加上key属性。
闭关修行中......
{...todo}
就是把todo的所有属性就传入了Todo组件,比如:
var todo = { a:123,b:345 } <Todo {...todo} /> //相当于 <Todo a="123" b="345" />
key 的的作用是为了给每个Todo组件一个唯一的标识,这里循环引用多个Todo组件,给每个组件一个唯一标识可以优化react的渲染。
key是作为你map返回对象的唯一标识,对于react的渲染是非常有用的,可以优化速度,如果你不写也没有关系,只是会在调试的过程中warning 让你加标识{...todo},es6语法,也是为了简化代码用的,它可以将todo这个json里面的所有内容作为这个组件,或者标签的属性,简化代码而已。json的key作为属性名称,json的value作为属性的值
react
warning
{...todo},es6
todo
json
key
value
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
就是把todo的所有属性就传入了Todo组件,比如:
key 的的作用是为了给每个Todo组件一个唯一的标识,这里循环引用多个Todo组件,给每个组件一个唯一标识可以优化react的渲染。
key是作为你map返回对象的唯一标识,对于
react的渲染是非常有用的,可以优化速度,如果你不写也没有关系,只是会在调试的过程中warning让你加标识{...todo},es6语法,也是为了简化代码用的,它可以将todo这个json里面的所有内容作为这个组件,或者标签的属性,简化代码而已。json的key作为属性名称,json的value作为属性的值