实践上，React和Vue在这里做着异样的事情，即创立可以更新的数据。 每当ref（）函数外部包装的一条数据被更新时，Vue本质上都会默许结合其本人的name和setName版本。 React要求您运用外部值调用setName（）来更新形状，假设您试图更新数据对象外部的值，Vue会假定您要这样做。 那么，为什么React还要从函数中别离值呢？为什么还要运用useState（）呢？ 本质上，每当形状改动时，React都希望可以重新运转某些生命周期挂钩。 在我们的示例中，假设调用setName（），React将知道某些形状已更改，因此可以运转这些生命周期挂钩。 假设直接改动形状，React将不得不做更多的任务来跟踪更改以及要运转的生命周期挂钩等。
如今，我们曾经有了一些变通的方式，让我们经过研讨如何将新项目添加到两个"待办事项"中来了解更多细节。
我们如何创立新的待办事项？ React：const createNewToDoItem = () => {
const newId = generateId();
const newToDo = { id: newId, text: toDo };
setList([...list, newToDo]);
setToDo("");
};
React是如何做的？在React中，我们的输入字段具有一个名为value的属性。 每次经过onChange事情侦听器更改其值时，都会自动更新此值。 JSX（基本上是HTML的变体）如下所示：
<input type="text" placeholder="I need to..." value={toDo} onChange={handleInput} onKeyPress={handleKeyPress}/>
因此，每次更改值时，它都会更新形状。 handleInput函数如下所示：
const handleInput = (e) => {
setToDo(e.target.value);
};
如今，每当用户按下页面上的+按钮添加新项目时，都会触发createNewToDoItem函数。 让我们再次看一下该功用，以了解发作了什么：
const createNewToDoItem = () => {
const newId = generateId();
const newToDo = { id: newId, text: toDo };
setList([...list, newToDo]);
setToDo("");
};
本质上，newId函数基本上是在创立一个新ID，该ID将提供应我们的新toDo项。 newToDo变量是一个具有ID密钥的对象，该ID密钥具有newId的值。 它还具有一个文本键，该键将toDo中的值用作其值。 这与输入值更改时要更新的toDo相反。
然后，我们用完setList函数，并传入一个包含整个列表以及新创立的newToDo的数组。
假设… list位看起来很奇异，则扫尾的三个点称为散布运算符，它基本上将列表中的一切值作为独自的项目传递，而不是复杂地传递残缺的 项目作为数组。 困惑？ 假设是这样，我剧烈建议您细心阅读散布，由于它很棒！
无论如何，最后我们运转setToDo（）并传入一个空字符串。 这样我们的输入值为空，可以输入新的toDos了。
Vue：function createNewToDoItem() {
const newId = generateId();
list.value.push({ id: newId, text: todo.value });
todo.value = "";
}
Vue是如何做的？在Vue中，输入字段上有一个称为v-model的句柄。 这使我们可以执行称为双向绑定的操作。 让我们快速查看一下输入字段，然后阐明发作了什么：
<input type="text" placeholder="I need to..." v-model="todo" v-on:keyup.enter="createNewToDoItem"/>
V-Model将该字段的输入与我们在setup（）函数顶部创立的变量绑定在一同，然后将其作为键地下给我们前往的对象。 到目前为止，我们还没有引见对象前往的内容，因此，关于您的信息，这是我们从ToDo.vue外部的setup（）函数前往的内容：
return { list, todo, showError, generateId, createNewToDoItem, onDeleteItem, displayError};
这里，list，todo和showError是我们的有形状值，而其他一切功用都是我们希望可以在运用顺序其他位置调用的函数。 好的，从切线前往，当页面加载时，我们必须将todo设置为空字符串，例如：const todo = ref（""）。 假设这里曾经有一些数据，例如const todo = ref（"在此处添加一些文本"）：我们的输入字段将在输入字段外部曾经添加一些文本的状况下加载。 无论如何，回到它作为一个空字符串，无论我们在输入字段中键入什么文本都必须绑定到todo.value。 这实践上是双向绑定-输入字段可以更新ref（）值，而ref（）值可以更新输入字段。
因此，回忆一下前面的createNewToDoItem（）代码块，我们看到将todo.value的内容推出列表数组-经过将todo.value推入list.value-然后将todo.value更新为空字符串。
我们还运用了与React示例中相反的newId（）函数。
我们如何从列表中删除？ React：const deleteItem = (id) => {
setList(list.filter((item) => item.id !== id));
};
React是如何做的？因此，虽然deleteItem（）函数位于ToDo.js内，但我很容易可以经过首先将deleteItem（）函数作为道具传递给ToDoItem.js来对其停止援用：
<ToDoItem key={item.id} item={item} deleteItem={deleteItem} />
首先，该函数向下传递，以使儿童可以运用它。 然后，在ToDoItem组件外部，执行以下操作：
<button className="ToDoItem-Delete" onClick={() => deleteItem(item.id)}> -</button>
(责任编辑：admin)