reactjs - 数组中数组的绑定属性

Question

这并不是要开始讨论 Anugular 与 REACT。我知道在某个时候我会学会爱上 REACT。这就是我开始在 REACT 中开发新应用的原因。我只需要某种确认我是否根据绑定正确理解了 REACT。

我正在制作一个函数 REACT 组件（箭头函数），因为我可以读到这是新的推荐做法。我有一些带有数据数组的数据。我正在使用所有这些数据来显示和更改内容。在这个特定的示例中，我使用它来切换一些菜单。

在切换中的 Angular 中，您将拥有如下内容：

toggle(row){
   row.toggle=!row.toggle;
}

正如我在 REACT 中所理解的那样，如果你想更改内容，或者有一些关于切换的状态，你需要钩子（如果我错了，请纠正我）。因此，在 REACT 中，您会将所有数据应用到 setData(someData)。如下所示：

const toggleMenu = (section, row) => {
  console.log(section);

  setDataList(
    dataList.map(s => {
      return s.id === section.id
        ? {
            ...s,
            table: s.table.map(t => {
              return t.id === row.id
                ? { ...t, toggleDropdown: !row.toggleDropdown }
                : t;
            })
          }
        : s;
    })
  );
};

所以我必须在我的数据中找到我的特定对象，更新它，然后将它全部传回给钩子设置器。我在这里有两个担忧。有时我会满足客户的要求，他们希望主页上有大量数据（即使这不是最佳实践）。这仍然会在 Angular 中执行。任何人都有一些经验，REACT 是否会在这种情况下使用这种方法（如此多的循环）执行？

最后我误解了什么，或者这是使用 REACT 时的正常做法 - 还是我让任务过于复杂？我在这里做了一个小样本来展示一个示例案例：

https://codesandbox.io/s/dropdown-for-multiple-maps-gmqpp?fontsize=14&hidenavigation=1&theme=dark

我正在寻找的答案是是的，这是要走的路，或者不是，您完全误解了这个概念，因为..如果有人对包含大量内容的页面的性能有经验，那就更好了。

标签： reactjs