Javascript 分解绑定到函数的结构？

我目前正试图从以下方面理解ReactJS代码：

consttodolist=（{todos，onTodoClick}）=>(

{todo.map（todo=>(
onTodoClick（todo.id）}/>
))}

);

---

我相信

（{todos，onTodoClick}）=>（…）

被称为解构绑定？但是从我看到的示例来看，它们遵循以下模式：

{…}=>（…）

，与我的示例相比，初始哈希没有用括号括起来。 编辑：例如和。

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

我环顾了一下这个网站，找到了关于解构绑定的解释，但没有一个能让我深入理解这段代码

---

非常感谢您花时间阅读此问题。

语法（）说明此函数接受对象。如果对象有一个用于

todos

或

onTodoClick

的键，则它们可以用作变量。这只是函数开头的常见模式的语法糖分：

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

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

const-TodoList

部分正在将

TodoList

定义为不能修改的常量函数引用。在这种情况下，

const

与此函数可能只修改指向函数本身的指针的任何值无关

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

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

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

TodoList = 'foobar';

…这可能会导致一个错误

---

const

只是强制执行

TodoList

变量保持不变。这是一个细微的差别，只是一个一般的最佳实践。

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

let { todos, onTodoClick } = o;

---

“我见过他们中的一个遵循这种模式：{…}=>（…）”你确定吗？这将是一个语法错误。只有当一个参数是一个简单变量时，才可以省略paren。“正如在初始哈希中没有用括号括起来一样”，如果您在某个地方看到了这一点，那么该示例是错误的。通过在浏览器控制台中键入

var-foo=（{a，b}）=>{}

和

var-foo={a，b}=>{}

可以很容易地实现这一点。其中只有一个有效。“被称为解构绑定”更具体地说，这将被称为参数解构。你能告诉我更多关于const-TodoList的信息吗？它与普通函数声明不同吗？从这种形式的解构绑定开始更容易吗？我不明白你为什么要使用普通函数声明的替代方法。

let { todos, onTodoClick } = o;