在 ReactJS 中存储组件数组数据的最佳方式？
Best way to store data for array of components in ReactJS?
我有一个应用程序，它在页面加载时从数据库中获取数据（objects 的数组）并将其显示为 UI 中的行。每行都是一个 child 组件，可以创建、编辑、删除或重新排序。 parent 组件有一个保存按钮，它从所有 child 组件获取数据并在数据库中更新它。
似乎有 2 种方法来存储此数据：
将所有数据存储在 parent 组件中：
parent 组件获取数据，将其存储在状态变量中并将其传递给 child 组件。 child组件中的数据发生变化时，直接在parent组件中更新。当我们需要保存时，parent中的整个状态变量可以原样写入数据库。
优点：
- 所有数据都保存在 parent 中，因为它应该在数据库中。所以获取和保存很简单。
- Child 组件是哑的，只显示 UI 中的数据。聪明 data-components 和愚蠢 presentational-components 的良好分离。
缺点：
- 每当 child 更新数据时，parent 的状态变量也会更新，因此所有 child 组件 re-render 因为它们共享相同的状态数据变量（我是这里错了吗？React handle arrays state var 的元素作为 props 巧妙地传递了吗？）。如果列表变长并且有很多 child 组件，这可能是个问题。
- parent 组件几乎完成了所有工作，这使得它变得相当复杂。
将每一行数据存储在child组件中：
parent 组件获取数据，并将其传递给 child 组件。 child 组件维护自己的数据，当 child 组件中的数据发生变化时，仅在其本地状态变量中更新它。当我们需要保存时，parent 组件将不得不要求每个 child 组件提供它的数据，将其整理成一个数组并更新到数据库中。
优点：
- 在更改行数据时，只有 child 组件是 re-rendered。
- Child 组件处理自己的数据，使 parent 组件更简单。
缺点：
- 跨 child 个组件的分布式数据意味着为数据库写入整理它们是一件痛苦的事情。
- 单击保存按钮时，使用 refs 从 parent 调用 child 中的函数，returns child 数据不是推荐的 React 模式。
在 React 中，建议父组件处理数据并将该数据分发给子组件。为了避免 re-rendering 每个子组件，我会看一下 memo()：https://reactjs.org/docs/react-api.html#reactmemo。这将缓存您的子组件，并决定它是否需要 re-render。
要用数组实现这个，我会检查这个：
我有一个应用程序，它在页面加载时从数据库中获取数据（objects 的数组）并将其显示为 UI 中的行。每行都是一个 child 组件，可以创建、编辑、删除或重新排序。 parent 组件有一个保存按钮，它从所有 child 组件获取数据并在数据库中更新它。
似乎有 2 种方法来存储此数据：
将所有数据存储在 parent 组件中：
parent 组件获取数据，将其存储在状态变量中并将其传递给 child 组件。 child组件中的数据发生变化时，直接在parent组件中更新。当我们需要保存时，parent中的整个状态变量可以原样写入数据库。
优点：
- 所有数据都保存在 parent 中，因为它应该在数据库中。所以获取和保存很简单。
- Child 组件是哑的，只显示 UI 中的数据。聪明 data-components 和愚蠢 presentational-components 的良好分离。
缺点：
- 每当 child 更新数据时，parent 的状态变量也会更新，因此所有 child 组件 re-render 因为它们共享相同的状态数据变量（我是这里错了吗？React handle arrays state var 的元素作为 props 巧妙地传递了吗？）。如果列表变长并且有很多 child 组件，这可能是个问题。
- parent 组件几乎完成了所有工作，这使得它变得相当复杂。
将每一行数据存储在child组件中：
parent 组件获取数据，并将其传递给 child 组件。 child 组件维护自己的数据，当 child 组件中的数据发生变化时，仅在其本地状态变量中更新它。当我们需要保存时，parent 组件将不得不要求每个 child 组件提供它的数据，将其整理成一个数组并更新到数据库中。
优点：
- 在更改行数据时，只有 child 组件是 re-rendered。
- Child 组件处理自己的数据，使 parent 组件更简单。
缺点：
- 跨 child 个组件的分布式数据意味着为数据库写入整理它们是一件痛苦的事情。
- 单击保存按钮时，使用 refs 从 parent 调用 child 中的函数，returns child 数据不是推荐的 React 模式。
在 React 中，建议父组件处理数据并将该数据分发给子组件。为了避免 re-rendering 每个子组件，我会看一下 memo()：https://reactjs.org/docs/react-api.html#reactmemo。这将缓存您的子组件，并决定它是否需要 re-render。
要用数组实现这个，我会检查这个：