ReactJS state vs props - 在哪里保存 To Do 应用程序的真实来源

Question

我从 Angular 世界开始使用 ReactJS，我真的很困惑必须跟踪 json 数据 object 以及如何编辑和删除项目。

var myTasks = {
  "tasks": [
    {
      "name": "HOME tasks",
      "type": "HOME",
      "tasklist": [
        {
          "id": 1,
          "todo_name": "go home",
          "user": "scotty",
          "actions": [
            {
              "name": "delete",
              "action": "delete.php"
            }
          ]
        },
        {
          "id": 2,
          "todo_name": "go to work",
          "user": "scotty",
          "actions": [
            {
              "name": "delete",
              "action": "delete.php"
            }
          ]
        }
      ]
    },
    {
      "name": "WORK tasks",
      "type": "WORK",
      "tasklist": [
        {
          "id": 1,
          "todo_name": "go home",
          "user": "scotty",
          "actions": [
            {
              "name": "delete",
              "action": "delete.php"
            }
          ]
        },
        {
          "id": 2,
          "todo_name": "go to work",
          "user": "scotty",
          "actions": [
            {
              "name": "delete",
              "action": "delete.php"
            }
          ]
        }
      ]
    }
  ]
}

假设我把它分解成组件（代码不正确，我只是想说明这个想法）。

var Tasks = React.createClass({ 
    <TaskListPerType/>
});
var TaskListPerType = React.createClass({
    <TaskListPerType_Actions />
});
var TaskListPerType_Actions = React.createClass({
});

我正在考虑在 Tasks 组件上创建数据状态，然后将状态作为 props 传递给 child 组件。我想在 TaskListPerType_Actions 组件上添加删除功能。

问题是每个组件是否都有自己的状态，当我添加删除等功能时，我是否只需要对该组件内的状态进行操作，当我对该状态进行操作时，它是否会自动更新状态parent 作为道具传递给 children 的地方？

Answer 1

要使 React 有意义，您必须首先忘记 MVC javascript。当然，您可以使用 MVC，但 React 是为单向数据绑定而设计的。也就是说，我的意思是数据本身（或包含数据的 class，它会发出事件）触发视图中的更改。查看Flux，这个概念会更加清晰。

通常，您不希望状态出现在每个组件上。每个组件应该只关心它自己的状态。如果在需要存储的情况下，应该将其分离到它自己的对象中，并且该对象应该是更改的来源。

React 中没有发生数据突变，每个状态变化都会触发视图的完全重新渲染。一开始这很令人困惑，但是当您开始理解 React 希望您的数据流动的方式时，它会变得更容易。

这是一个 full example 使用 Flux 实现的 React 应用程序，在我看来，这是创建 React 应用程序最自然的方式。

ReactJS state vs props - 在哪里保存 To Do 应用程序的真实来源

ReactJS state vs props - where to keep source of truth for a To Do app

reactjs