解构绑定到函数？

Question

我目前无法尝试从here了解这一点ReactJS代码：

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

我相信({ todos, onTodoClick }) => (...)被称为解构绑定？但是从我见过的例子来看，他们遵循这样的模式：{...} => (...)，因为在初始哈希中没有用括号括起来，与我的例子形成鲜明对比。编辑：这个例子是here和here。

我也不明白它似乎这是一个更新值的函数，但它是用const声明的？

我浏览了一下这个网站，我找到了解构绑定的解释，但似乎没有一个能让我深入了解这个代码。

非常感谢你花时间阅读这个问题。

Answer 1

{ todos, onTodoClick }语法（Parameter handling as destructuring ）说这个函数接受一个对象。如果对象有todos或onTodoClick的密钥，它们就可以用作变量了。这只是函数开头这种常见模式的语法糖：

let todos = o.todos;
let onTodoClick = o.onTodoClick;

因为您在JSX中，所以这种语法特别方便，因为您希望事物看起来尽可能具有声明性。

const TodoList部分将TodoList定义为不能修改的常数函数引用。在这种情况下，const与此函数可能仅修改指向函数本身的指针的任何值无关。

这个函数声明非常类似于可能更熟悉的：

var TodoList = function(o) {
    // etc
};

但是，如果您使用该表格，那么从技术上讲，这样做是合法的：

TodoList = 'foobar';

......这可能会导致错误。

const只是强制执行TodoList变量。这是一个微妙的差异，只是一般的最佳实践。

Answer 2

@kuwze - 您还可以通过以下方式在ES6解构语法中执行上述操作：

let { todos, onTodoClick } = o;