redux中的{...todo}应该如何理解？

Question

components/Todo.js

import React from 'react'
import PropTypes from 'prop-types'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

Todo.propTypes = {
  onClick: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

export default Todo

components/TodoList.js

import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map(todo => (
      <Todo key={todo.id} {...todo} onClick={() => onTodoClick(todo.id)} />
    ))}
  </ul>
)

TodoList.propTypes = {
  todos: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.number.isRequired,
      completed: PropTypes.bool.isRequired,
      text: PropTypes.string.isRequired
    }).isRequired
  ).isRequired,
  onTodoClick: PropTypes.func.isRequired
}

export default TodoList

Answer 1

建立一系列以todo对象的属性为名，值为属性值的attribute。
如果 todu={attr:"value"} 的话，则为 <Todo> 标签创建名为attr的attribute，其值为value

Answer 2

import React from 'react'
import PropTypes from 'prop-types'
import Todo from './Todo'



const TodoListShow = (todos) => (
    <ul>
        {todos.map(todo => (
            <Todo key={todo.id} {...todo} />
        ))}
    </ul>
)


class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        };
        this.todos = [
            {
                id: 'c1',
                value: '加鲁鲁',
                adhere: '粘贴'
            },
            {
                id: 'c2',
                value: '无敌钻石手',
                adhere: '行为'
            },
            {
                id: 'c3',
                value: '仙女',
                adhere: '人生'
            }
        ];
        this.todos.map(todo => (
            console.log(todo)
        ))
    }

    render() {

        return (
            TodoListShow(this.todos)
        )
    }
}



export default TodoList;

import React, { Component } from 'react';

class Todo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
        };
    }

    render() {
        return <div className="square" onClick={() => alert('click')}>
            {this.props.value+'==='+this.props.adhere}
        </div>
    }
}

export default Todo;

Answer 3

将todo内的key:value作为属性赋给所在的虚拟DOM节点