reactjs -> useReducer主题

Question

在reactjs中，我不理解下面的代码，请在下面帮助我

...todo, complete: !todo.complete

据我所知，第一个...todo是扩展数组，逗号之后条件已经在它上实现了。

Answer 1

我是传送机操作员。

JavaScript扩展算子(.)允许我们快速地将现有数组或对象的全部或部分复制到另一个数组或对象中。

您可以在此链接中阅读更多内容。

Answer 2

这是香草JavaScript，这里没有任何反应

这不是条件

!false -> true
!true -> false

这样做：

const todo = {
  name: 'Something to do',
  complete: false
}

const newTodo = {
  ...todo,
  complete: !todo.complete
}

在以下方面的成果：

{
  name: 'Something to do',
  complete: true
}

Answer 3

这是扩散操作符，只是简单的JS，没有相关的反应。

当您使用扩展运算符时：

const todo = {
  completed: false,
  title: "Test"
};

const sameTodo = { ...todo };

sameTodo变量将与todo变量相同。

// sameTodo
{
  completed: false,
  title: "Test"
}

在您在问题中给出的示例中，它将首先创建一个新对象，然后将todo对象的值添加到其中。

例：

const todo = {
  completed: false,
  title: "Something"
}

/*
Value of `changedTodo`:

{
  completed: false,
  title: "Something"
}

*/
const changedTodo = {
  ...todo
}

然后上面写着

complete: !todo.complete

!标记是一个逻辑的'Not‘操作符，它会将一个值更改为相反的值。

例：

// True will become false & false will become true
!true --> false
!false --> true

因此，当我们回到changedTodo时，我们可以将操作符添加到completed属性中：

const changedTodo = {
  ...todo,
  completed: !todo.completed
}

当您分配一个已经存在于您正在传播的对象中的属性时，它将覆盖它。

因此，在这里，todo对象已经有了一个completed属性，所以当我们使用completed: !todo.completed时，它将覆盖todo对象上的内容，并将其更改为相反的对象。

由于todo对象的completed属性为false，因此它将转到true

最后，我们得到了这样的结果：

const changedTodo = {
  title: "Something",
  completed: true
}

顺便说一句，这与React或useReducer无关。这是普通的香草Javascript。

希望这能有所帮助。