哈佛出品，10行代码训练“药神”模型

这里我们看到两个传递给 ToDoItem 组件的 props。从这里开始，我们就可以通过 this.props 在子组件中引用它们。因此要访问 item.todo prop 时，我们只需调用 props.item。你可能已经注意到还有一个 key prop（因此从技术上讲，我们实际上正在传递三个 props）。这主要用于 React 的内部，因为它简化了同一组件的多个版本之间更新和跟踪更改的工作（我们这里每个 todo 是 ToDoItem 组件的一个副本）。确保你的组件具有唯一键也很重要，否则 React 会在控制台中发出警告。

Vue：

在 Vue 中，我们将 props 传递到子组件的创建位置。如：

 

这里，list、todo 和 showError 是我们的有状态值，而其他所有内容都是我们希望能在应用其他位置调用的函数。在页面加载时，我们必须将 todo 设置为一个空字符串，例如：const todo = ref("")。如果其中已经有一些数据，例如 const todo = ref("add some text here")：我们的输入字段将在内部已有 add some text here 的情况下加载。不管怎样，回到空字符串的状态，无论我们在输入字段中键入什么文本都必须绑定到 todo.value。这实际上就是双向绑定——输入字段可以更新 ref() 值，反过来后者也可以更新输入字段。

回顾一下前面的 createNewToDoItem () 代码块，可以看到，我们将 todo.value 的内容推送到 list 数组中，然后将前者更新为一个空字符串。

我们还使用了与 React 示例中相同的 newId() 函数。

如何从列表中删除项目？

React：

 

本质上，newId 函数是在创建一个新 ID，该 ID 将提供给我们的新 toDo 项目。newToDo 变量是一个对象，有一个 id 键，其值由 newID 确定。它还有一个 text 键，其值由 toDo 确定。这个 toDo 就是输入值更改时要更新的那个 toDo。

setList 函数到此为止，然后我们传入一个包含整个 list 以及新创建的 newToDo 的数组。

你可能觉得…list 看起来很奇怪：开头的三个点称为 spread 运算符，负责将 list 中的所有值作为单独的项目传递，而不是简单地把所有项目打包在一起作为数组传递。感觉有些糊涂吗？那我强烈建议你仔细阅读 spread 运算符的相关介绍，因为它很有用！

最后我们运行 setToDo() 并传入一个空字符串。这样我们的输入值为空，可以输入新的 toDo 了。

Vue：
 

假设我们有一些数据名为 name，被分配了 Sunil 值。

在 React 中，由于我们使用 useState() 创建了较小的状态，因此很可能已经用const [name, setName] = useState('Sunil')创建了一些东西。在应用中，我们将简单地调用 name 来引用同一段数据。这里的主要区别在于我们不能简单地写上name = 'John'，因为 React 有一些限制来预防这种简单且无所顾忌的突变。在 React 中，我们要写成setName('John')。这里用到了 setName。在const [name, setName] = useState('Sunil')中，它创建两个变量，一个变量变为const name = 'Sunil'，而第二个 const setName 被分配了一个函数，该函数使 name 可以用新值重新创建。

在 Vue 中，它位于 setup() 函数内部，并且被称为const name = ref('Sunil')。在应用中，我们将调用 name.value 来引用它。如果要使用在 ref() 函数内部创建的值，我们将在变量上寻找.value 而不是简单地调用该变量。换句话说，如果我们想要一个持有状态的变量值，我们将寻找 name.value 而不是 name。如果要更新 name 的值，可以通过更新 name.value 来完成。例如，假设我想将我的名字从 Sunil 更改为 John, 可以写name.value = "John"来做到这一点。

实际上，React 和 Vue 在这里做的是同样的事情，也就是创建可以更新的数据。Vue 本质上会在每次更新一条包装在 ref() 函数内的数据是默认结合它自己的 name 和 setName 版本。React 要求你使用内部值调用 setName() 来更新状态，而如果你曾尝试更新数据对象内部的值，Vue 就会假设你要这么做。那么为什么 React 会费劲地将值与函数分开，还要使用 useState() 呢？这是因为当状态改变时，React 希望重新运行某些生命周期 Hooks。在我们的例子中，当你调用 setName() 时，React 会知道有些状态已更改，所以可以运行它们的生命周期 Hooks。如果你直接改变状态，React 将不得不做更多的工作来跟踪更改以及要运行的生命周期 Hooks 等。

现在我们已经搞明白了数据突变，接下来看看在两个 To Do 应用中添加新项目的方法。

我们如何创建新的待办事项？

（编辑：长春站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!