在 React 中布局状态的正确方法

Question

在我的项目中，我想显示一个组列表。每个组都有不同的任务，这些任务依赖于（或不依赖于）其他任务。我从数据库中获得的列表如下所示：

{ 
    "id": 1, 
    "group": "Before breakfast", 
    "task": "scramble eggs", 
    "dependencyIds": [], 
    "completedAt": false 
}, 
{ 
    "id": 2, 
    "group": "Before breakfast", 
    "task": "Cook Eggs", 
    "dependencyIds": [ 1 ], 
    "completedAt": false 
},
{ 
    "id": 3,
    "group": "After breakfast",
    "task": "Do the dishes",
    "dependencyIds": [ 1, 2],
    "completed": false 
}

一种解决方案是将整个数据作为数组写入状态。但这意味着，每次当我完成一项任务时，我都会过滤整个数组并且必须更新整个状态。因此，我想知道如果在从数据库中获取数据后对其进行过滤和排序是否更有效。状态看起来像这样：

this.state = {
      "Before Breakfast": [
        {
          id: 1,
          title: "scramble eggs",
          completed: false,
          dependencies: []
        },
        {
          id: 2,
          title: "cook eggs",
          completed: false,
          dependencies: [1]
        }
      ],
      "After Breakfast": [
        {
          id: 3,
          title: "do the dishes",
          completed: false,
          dependencies: [1, 2]
        }
      ]
    };

我的想法是，现在只需更新具有任务的组对象，而不是整个状态。

这是否有意义，或者是否不必要地使代码过于复杂？

Answer 1

好吧，我看不出这对性能或其他方面有什么帮助，因为在比较虚拟 DOM 和真实的时，React 只会更改（重新渲染）所需的内容。而且它非常快，我认为如果不需要的话你应该忽略过滤。

在 React 中布局状态的正确方法

correct way to lay out a state in React

reactjs

react-state-management

react-state