反应 todos 教程道具与状态答案

【问题标题】：react todos tutorial props vs state反应 todos 教程道具与状态
【发布时间】：2023-03-22 10:55:01
【问题描述】：

所以我正处于学习 Meteor 和 React 的初级阶段，我刚刚完成了制作Todos list 的教程。

在实现中，我们在顶部有一个复选框，允许我们在已完成的任务和所有任务之间切换。这被设置为一个状态。

每个任务旁边还有复选框，可以将任务显示为已完成或未完成。

我的问题是，这两个复选框都是实时变化的，但只有前者被指定为状态变量？为什么任务复选框是道具？

【问题讨论】：

【解决方案1】：

全局复选框只是链接到App 组件的状态。

每个Task 组件的本地复选框变得更加复杂。问题是App 组件需要所有Task 对象的全局知识，例如隐藏已完成的任务。

Task 组件可以保持复选框状态，但这不是 React 的工作方式。在 React 中，父组件通常不会读取其子组件的状态，而是持有状态本身并将相关信息传递给其子组件，以便他们可以渲染它。

当一个孩子需要更新某些状态时，它会在全局级别进行（参见tutorial 中的toggleChecked 和deleteThisTask），以便其父母收到通知并重新渲染孩子。另一个例子见here。

【讨论】：

感谢您的回复，但我想我对为什么每个任务的检查（已完成或未完成）状态不是一个状态感到更加困惑。我想我明白为什么显示完成是一种状态，但不明白为什么每个任务旁边的复选框只是一个道具，当它是动态的时。查看两者的代码，两者都将 this.state/props.task.property 绑定到切换事件处理程序，它将变量更新到服务器，除了 showCompleted 使用状态而每个任务的检查使用道具。有什么说明吗？
全局状态是临时的（如果您关闭选项卡，它将消失）。 “本地”状态存储在数据库中，因此组件只能显示它们。您可以将它们存储在本地状态中，但在这里没有用，无论如何您都必须更新数据库。

【解决方案2】：

很好的解释here（完整版）

【讨论】：